CODEWITHSUNDEEP
javascriptreactjs
Wambura
Wambura

Reputation: 159

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

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;

Upvotes: 0

Views: 1487

Answers (2)

miraj
miraj

Reputation: 586

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

Upvotes: 1

Satwinder Singh
Satwinder Singh

Reputation: 229

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.

Upvotes: 0

Related Questions