How do I update my API data using form input data?

Question

So I have a component called Products that fetches data from an API endpoint. I also have another component with a form in it and this form is meant to update the products component with the input data and make the new input available to see along with the existing fetched data. How do I accomplish this??...I also passed down the state from the products component to the form component, was this okay??? Your help will be truly appreciated.

Here is my products component:

import React from "react";

import Form from "../Form/form";

import "./products.scss";

class Products extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      products: [],
    };
  }

  componentDidMount() {
    fetch("https://codechallenge.pikdrive.com/api/products")
      .then((res) => res.json())
      .then((res) => {
        this.setState({ products: res.data });
      });
  }

  render() {
    return (
      <div className="products-section">
        <h1>Products</h1>
        <div className="products-card-container">
          {this.state.products.map((product) => (
            <div className="products-body">
              <div className="products-body-content">
                <h4>Id </h4>
                <span>{product.id}</span>
                <h4>Name </h4> <span>{product.name}</span>
                <h4>Description </h4>
                <span>{product.description}</span>
                <h4>Quantity </h4>
                <span>{product.quantity}</span>
              </div>
            </div>
          ))}
        </div>
        <Form data={this.state} />
      </div>
    );
  }
}

export default Products;

Here is my form component:


import "./form.scss";

class Form extends React.Component {
  constructor(props) {
    super(props);

    this.state = this.props.data;
  }

  render() {
    console.log(this.state);
    return (
      <div className="order-actions-container">
        <form className="order-form">
          <label>Product Id </label>
          <input type="text" placeholder="Enter product id" />
          <label>Product Name </label>
          <input type="text" placeholder="Enter product name" />
          <label>Description </label>
          <input type="text" placeholder="Enter product description" />
          <label>Quantity</label>
          <input type="text" placeholder="Enter product quantity" />
          <button type="submit" className="add-button">
            Add Item
          </button>
        </form>
      </div>
    );
  }
}

export default Form;

first of all, you shouldn't assign your props in state . if you do so your state won't update when the props is changed. see: reactjs.org/docs/react-component.html#componentdidmount — miraj
– miraj, Commented Apr 21, 2021 at 19:30

miraj · Accepted Answer · 2021-04-22 16:44:45Z

check this if it works:

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: '' };
    this.submitData = this.submitData.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  const submitData = () => {
    this.props.onInputAdd(this.state.data)
  }
  const handleChange = event => {
    this.setState({ data: event.target.value})
  }
  render() {
    return (
        <form>
          <input type="text" onChange={this.handleChange} value={this.state.data}/>
          <button onClick={this.submitData}>
            Add Item
          </button>
        </form>
    );
  }
}
class Products extends React.Component {
  ... //other codes
  const handleSubmit = newInputData => {
    this.setState({products: [...this.state.products, newInputData]}) // for single item
    this.setState({products: [...this.state.products, newInputData]}) // for multiple new item
  }
  render() {
    return (
     <>
        ...
        <Form onInputAdd={this.handleSubmit} />
     </>
    )
  }
}

Satwinder Singh · Accepted Answer · 2021-04-21 19:30:11Z

0

Better way to do this would be using reducers. There are a lot of tutorials available for that. In case you still want to persist with this you can follow below steps:

1- instead of passing the state, add a new method in Products component and pass it to the form component.

2- now when in form component user makes changes and click the button then call save/update api and after receivi g the response call this method which we passed in first step along with the form values.

3- now in Products component you woll get the form values in the function, you can push that in existing array of products. It will update the list.

answered Apr 21, 2021 at 19:30

Satwinder Singh

2292 silver badges10 bronze badges

Collectives™ on Stack Overflow

How do I update my API data using form input data?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related