How to refresh the data component on form submit in React?

Question

Goal

Been stuck on this for good few hours now. I need help in implementing a way of refreshing the data when a user submits the form.

Code

This is the main component that laods both the ProductForm and ShowProducts components.

import React from 'react';
import './App.css';
import { ShowProducts } from './ShowProducts';
import { ProductForm  } from './ProductsForm';


class App extends React.Component {
  render() {
    return (
      <div className="App">
        <ProductForm/>
        <ShowProducts />
      </div>
    );
  }
}

export default App;

Here is the ProductsForm file, all works fine as it should. It sends data to NodeJS to insert values into a database.

import React from 'react';
import axios from 'axios';

class ProductForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            productName: '',
            stock: '',
            basePrice: ''
        }
    }

    changeHandler = e => {
        this.setState({ [e.target.name]: e.target.value });
    }

    submitHandler = e => {
        e.preventDefault();
        console.log(this.state);
        axios.post('http://localhost:5000/addProduct', this.state)
            .then(res => {
                console.log(res);
            })
            .catch(err => {
                console.log(err);
            })
    }

    render() {
        const { productName, stock, basePrice } = this.state;
        return (
            <form onSubmit={this.submitHandler}>

                <input
                    placeholder="Product Name"
                    value={productName}
                    name="productName"
                    onChange={this.changeHandler} />

                <input
                    placeholder="Stock"
                    value={stock}
                    name="stock"
                    onChange={this.changeHandler} />

                <input
                    placeholder="Price"
                    value={basePrice}
                    name="basePrice"
                    onChange={this.changeHandler} />
                <button type="submit">Submit</button>
            </form>
        );
    }
}

export {ProductForm};

Finally, here I have ShowProducts. This component communicates with NodeJS to fetch the data form the database and displays it.

import React from 'react';

class ShowProducts extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          products: []
        };
        this.componentDidMount = this.componentDidMount.bind(this);
    }
    
    componentDidMount() {
        fetch('http://localhost:5000/')
            .then(res => res.json())
            .then(res => this.setState({products : res}, console.log(res)));
        }

    render() {
        return (
          <div className="App">
              {this.state.products.map((product, i) => (
                <div  key={i}>
                   <p style={{fontSize: "12px"}}>Product: {product.product_name} - Stock: {product.stock}</p>
                </div>
              ))}
             
          </div>
        );
      }
}

export { ShowProducts };

What I have tried

I added this function in the ShowProducts.

updateData() {
    fetch('http://localhost:5000/')
    .then(res => res.json())
    .then(res => this.setState({products : res}, console.log(res)));
}

And altered the render to this:

render() {
    return (
      <div className="App" onClick={this.updateData()}>
...

      </div>
    );
  }

And finally in the ProductsForm I have altered the button to this:

<button type="submit" onClick={this.props.updateData}>Submit</button>

Problem

This works, but it creates an infinite loop somewhere - because my Chrome Console is going crazy.. not sure why.

score 1 · Answer 1 · answered Apr 02 '21 at 20:10

1

React does not know when your Db gets updated. To let it know, either change state or props for a re-render. so, inside your submitHandler

axios.post('http://localhost:5000/addProduct', this.state)
      .then(res => {
        console.log(res);
        // .... here fetch data again from backend and set to state, like: 
        /* fetch('http://localhost:5000/')
            .then(res => res.json())
            .then(res => this.setState({products : res}, console.log(res)));
        } */
      })

This way your state will change, which cause component to re-render

answered Apr 02 '21 at 20:10

Shivam Jha

3,160
3
22
36

Does this mean I need to alter my `this.state = {...}` in `ProductForm` ? – Eduards Apr 02 '21 at 20:13
Yes. if `ShowProducts` component is a child, pass down an updater function to change it's state. – Shivam Jha Apr 02 '21 at 20:15
An updater function? Sorry - I am new to React – Eduards Apr 02 '21 at 20:17
1

No worries. See [how-to-update-parents-state-in-react](https://stackoverflow.com/questions/35537229/how-to-update-parents-state-in-react) – Shivam Jha Apr 02 '21 at 20:18
Nope - I have just tried that, it didn't work :\ – Eduards Apr 02 '21 at 20:37
1

Consider adding the updated code under **Update** title in question, better provide a [CodeSandBox Link](https://codesandbox.io/s/fervent-brattain-imzyb) using some [Demo JSON API](https://jsonplaceholder.typicode.com/), so it is reproducible – Shivam Jha Apr 02 '21 at 20:39
Cool.. same approach used? – Shivam Jha Apr 03 '21 at 03:19

score 1 · Accepted Answer · answered Apr 02 '21 at 21:48

Thanks to https://stackoverflow.com/users/11667949/shivam-jha I managed to solve this.

I moved all the loading logic into App.js

import React from 'react';
import './App.css';
import { ShowProducts } from './ShowProducts';
import { ProductForm } from './ProductsForm';


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      products: []
    };
    this.componentDidMount = this.componentDidMount.bind(this);
  }

  componentDidMount() {
    fetch('http://localhost:5000/')
      .then(res => res.json())
      .then(res => this.setState({ products: res }, console.log(res)));
  }

  render() {
    return (
      <div className="App">
        <ProductForm handler={this.componentDidMount} />
        <ShowProducts products={this.state.products}/>
      </div>
    );
  }
}

export default App;

Altered the ShowProducts.js to get data from the parent (App.js)

import React from 'react';

class ShowProducts extends React.Component {
    loadData() {
        return (
            <div>
                {this.props.products.map((product, i) => (
                    <div key={i}>
                        <p style={{ fontSize: "12px" }}>Product: {product.product_name} - Stock: {product.stock}</p>
                    </div>
                ))}
            </div>
        )
    }

    render() {
        return (
            <div className="App">
                {this.loadData()}
            </div>
        );
    }
}

export { ShowProducts };

And finally the one I was after...

import React from 'react';
import axios from 'axios';

class ProductForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            productName: '',
            stock: '',
            basePrice: ''
        }
    }

    changeHandler = e => {
        this.setState({ [e.target.name]: e.target.value });
    }

    submitHandler = e => {
        e.preventDefault();
        console.log(this.state);
        axios.post('http://localhost:5000/addProduct', this.state)
            .then(res => {
                console.log(res);
            })
            .catch(err => {
                console.log(err);
            })
    }

    render() {
        const { productName, stock, basePrice } = this.state;
        return (
            <form onSubmit={this.submitHandler}>

                <input
                    placeholder="Product Name"
                    value={productName}
                    name="productName"
                    onChange={this.changeHandler} />

                <input
                    placeholder="Stock"
                    value={stock}
                    name="stock"
                    onChange={this.changeHandler} />

                <input
                    placeholder="Price"
                    value={basePrice}
                    name="basePrice"
                    onChange={this.changeHandler} />
                <button type="submit" onClick={this.props.handler}>Submit</button>
            </form>
        );
    }
}

export {ProductForm};

How to refresh the data component on form submit in React?

2 Answers2