Post using forms on Reactjs

Question

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

I am having trouble on how to change the state accurately using map because I need to put different answers in different question and then use POST — William Tekimam
– William Tekimam, Commented Nov 28, 2018 at 5:31

Manpreet Singh · Accepted Answer · 2018-11-28 05:36:54Z

1

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...

answered Nov 28, 2018 at 5:36

Manpreet Singh

1582 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Post using forms on Reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related