CODEWITHSUNDEEP
javascriptreactjsforms
David Sanders
David Sanders

Reputation: 131

How to re-render list automatically when form is submitted in React.js

I just figured out how to get and post data to database. The data is displayed in a list when page renders. I want the list to re render when the form input is submitted. As of now I have to refresh the page manually in order to get the new item to show in the list.

I have already tried to create a state change in the handleSubmit function. Nothing seems to happen though.

handleSubmit(event) {
  event.preventDefault();
  fetch('http://localhost:5000/api/listitems', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
     body: JSON.stringify( {
        //ID : this.state.id,
        Content: this.state.content,
        List_Group: this.state.listgroup,
        Date_Added: this.state.date
      })
    })
    .then(res => res.json())
    .catch(err => console.log(err));
}

Below is the form and list code

     <h1>Submit an Item</h1>
      <form onSubmit={this.handleSubmit} style={formStyle}>
        <label>
          Content:
          <input type="text" value={this.state.content} onChange= 
          {this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
      <h1>Grocery List</h1>
      {this.state.items.map(
        (item, i) => 
          <p key={i}>{item.List_Group}: {item.Content}</p>
        )}

The list should show the new item on submit automatically.

Upvotes: 0

Views: 1974

Answers (4)

Leroy Stav
Leroy Stav

Reputation: 718

Keeping in mind I have zero practical knowledge of react, it seems to me you simply have to update the this.state.items array.

I assume that your component has some sort of loadItems method, so I would say that your then should look something more like .then(() => this.loadItems())

UPDATED:

  //fetch data from server
  handleData = () => {
    fetch('http://localhost:5000/api/listitems')
       .then(response => response.json())
       .then(data => this.setState({ items: data }));
  }

  //call handleData() on page load
  componentDidMount() {
    this.handleData();
  }

  //this function fires when form is submited
  handleSubmit(event) {
    event.preventDefault();
    fetch('http://localhost:5000/api/listitems', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
     body: JSON.stringify( {
        Content: this.state.content,
        List_Group: this.state.listgroup,
        Date_Added: this.state.date
      })
    })
    .then(res => res.json())
    .then(() => this.setState({content: ''}))
    //call handleData() when form is submited, which reloads list
    .then(() => this.handleData())
    .then(console.log(this.state.items))
    .catch(err => console.log(err));
  }

So the handleData() fetched the data from the server. It is called in componentDidMount() for the initial page load. Then it is called again each time the handleSubmit() function is called by the form. Each time handleData() is called it re-renders the list.

Upvotes: 1

Dmitry Weiner
Dmitry Weiner

Reputation: 96

You may do this:

handleSubmit(event) {
  event.preventDefault();
  fetch('http://localhost:5000/api/listitems', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
     body: JSON.stringify( {
        //ID : this.state.id,
        Content: this.state.content,
        List_Group: this.state.listgroup,
        Date_Added: this.state.date
      })
    })
    .then(res => res.json())
    .then((items) => this.setState({items: items})) // keep in mind that you may have to transform items to appropriate format to display
    .catch(err => console.log(err));
}

Upvotes: 0

Mike
Mike

Reputation: 617

You need to call this.setState. State updates trigger a rerendering.

handleSubmit(event) {
  event.preventDefault();
  fetch('http://localhost:5000/api/listitems', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
     body: JSON.stringify( {
        //ID : this.state.id,
        Content: this.state.content,
        List_Group: this.state.listgroup,
        Date_Added: this.state.date
      })
    })
    .then(res => {
      // depending on the response you may need to extract the property here
      this.setState({
         items: res.json(),
      });
    })
    .catch(err => console.log(err));
}

Upvotes: 0

Vikas Singh
Vikas Singh

Reputation: 1847

Set the state of your list of items after getting the response. here i am assuming that you are getting the whole list in response.

handleSubmit(event) {
event.preventDefault();
fetch('http://localhost:5000/api/listitems', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
 body: JSON.stringify( {
    //ID : this.state.id,
    Content: this.state.content,
    List_Group: this.state.listgroup,
    Date_Added: this.state.date
  })
})
.then(res => res.json())
.then(data => this.setState({items : data})
.catch(err => console.log(err));
}

Upvotes: 0

Related Questions