Btukfyl

I would like to POST to reactjs but having trouble changing and storing state. this is my state. I am thinking that I GET the "data" and POST it using the format of "post"

I have gone through several articles but I can't seem to find how would I use the POST function to update this.state.post and I need help on what to do when writing the handleSubmit and selectOption functions. I was thinking that whenever the user chooses an option, the state would be updated and the updated state will be posted using the handleSubmit function.

this.state = {

        "data": [

        {

        "id": 1,

        "question": "Gender",

        "label": "Gender",

        "options": [

            "Male",

            "Female",

            "Others"

        ],

    },

    ],

        "post": [

        {

            question_id: "",

            label: "",

            relationship: "",

            values: 

        }

        ]

    }



    componentDidMount() {

        fetch('https://zexample.com/testuser/profile').then(response => {

        return response.json()

    }).then(jsonify => {

        this.setState(jsonify);

        console.log(this.state);

    });

}



selectOption(id) {

    console.log(id);

    // this.setState({post: response.data.title})

};



handleSubmit(event) {

    event.preventDefault();

    console.log('data: ', event);

}

Here is the form that I render using the map() function

render() {

    return (

     <form onSubmit={this.handleSubmit}>

      <div>

      {this.state.data.map(question => (

          <div key={question.id}>

           <span className="icon">Icon</span>

            <div>

             <label htmlFor={question.id}>

             {question.question}

             </label>

            <select>

            {question.options.map(option => (

            <option value={option} onChange={this.selectOption.bind(this)}>

             {option}

            </option>

            )

            )}

            </select>

            </div>

            </div>

            )

        )}

        <div>

          <button type="submit">Continue</button>

        </div>

        </div>

      </form>

        );

 }

In order to update state or handle user selected options, u need to use this.setState({...}) react API instead of using POST function (https://reactjs.org/docs/react-component.html)

selectOption=(event)=>{

       this.setState((currentState)=>{



       return({ ...currentState, options:[event.target.value]})    

    })

 }

handleSubmit should be like this:-

handleSubmit=()=>{

     axios.post('http://localhost:3001/posts/',{...this.state})

      .then()

      .catch()

   };

}

Here i am assuming payload for post request as this.state object...I am showing example of axios library, its upto personal preference if u want to use axios or fetch API for ajax calls...