Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Need to update a state variable using setValue in axios which is initialized as a object

Hi I am learning React

Please go through my code, How do I set the state of a get response in axios?

const [state,setState] = useState({
bookingId: '', // This will contain booking ID from Input Field
bookingData: null, // This will contain booking data received from axios
infoMessage: ''
})

const onSubmit = (event) => {
event.preventDefault();
axios.get(url+state.bookingId).then((response.data)=>{
console.log(response.data);
setState({bookingData: response.data});
setState({infoMessage: ''});
console.log(state)
}).then((error)=>{
setState({bookingData: ''});
setState({infoMessage: `${state.bookingId} Not Found`});
})
})

<tr>
<td>{state.bookingData.id}</td>
<td>{state.bookingData.emailId}</td>
</tr>

I referred this thread How to set state of response from axios in react

But I couldn’t find a solution, still I am unable to get the response data inside state value

Tags:

2

Answers


  1. 0
    • Please format the code block before posting.
    • Please read further about how a change in state results in new data being rendered.
    • Read about String interpolation vs Concatenation.
    • Read about promise in JavaScript.

    Lets check the code,

    • Response handling: Instead of response.data use response as the parameter in the .then callback
    .then((response) => {
   setState(prevState => ({
   ...prevState,
   bookingData: response.data,
   infoMessage: ''
}));
    • Error Handling: Use .catch for error handling instead of chaining another .then.
    .catch((error) => {
  // handle error  
}

    For setting the state, you can do it something like

    setState(prevState => ({
  ...prevState,
  bookingData: null,
  infoMessage: `${state.bookingId} Not Found`
}));

    Do a quick google search to see how the above block works, or refer the link posted by Antonija

    Login or Signup to reply.
  2. 0

    You can set State value in React by this two ways:

    1. Assign it in single object with all properties:
    axios.get(url + state.bookingId).then((response.data) => {
    console.log(response.data);
    setState({
        bookingId: '',
        bookingData: response.data,
        infoMessage: ''
    });
    console.log(state)
}).then((error) => {
    setState({
        bookingId: '',
        bookingData: '',
        infoMessage: `${state.bookingId} Not Found`
    });
});
    1. Use Spread Operator to assign single properties:
    axios.get(url + state.bookingId).then((response.data) => {
    console.log(response.data);
    setState({ ...state, bookingData: response.data });
    setState({ ...state, infoMessage: '' });
    console.log(state)
}).then((error) => {
    setState({ ...state, bookingData: '' });
    setState({ ...state, infoMessage: `${state.bookingId} Not Found` });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search