React native issue : inserting an empty row

Question

Testing some things in React and having some issues with some of my logic. I am trying to get value from inputs in a form then on submitting that form I want to take that object of input values and add them to my plant state. When I console log I get the state values but then the plant state is empty. Any help is appreciated.

Thank you

      const [plant, setPlant] = useState();
          const [TypeofPlant, setType] = useState('')
          const [Phase, setPhase] = useState('')
          const [Days, setDay] = useState(null)
          const [Start, setStart] = useState(0)
          const [End, setEnd] = useState(0)
        
  const handleSubmit = async (e) => {

        e.preventDefault()

          setPlant({...plant, 
            TypeofPlant: TypeofPlant,
            Phase: Phase,
            Days: Days,
            Start: Start,
            End: End,
        
       
        
        })
       
                DataService.addNewPlant(plant).then(() => {
      
                    })
                   },
                    (error) => {
                        console.log(error)
                    }
                );

DataService:

  addNewPlant(data){
        return http.post('/plants/add',data)
        }

Answer 1

Try to console plant outside of DataService block.

Answer 2

The Response.json() method interface takes a Response stream and reads it to completion. It returns a promise which resolves with the result of parsing the body text as JSON.

Update the code like below

....
DataService.addNewPlant(data).then(res => {
            const response = res.json();
            setPlant({
                TypeofPlant: response.data.TypeofPlant,
                Phase: response.data.Phase,
                Days: response.data.Days,
                Start: response.data.Start,
                End: response.data.End,
            })
            console.log(response.data);}
....