React native issue : inserting an empty row - react-native

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);}
....