i want to pass a prop from one(App.jsx) component to other component(form.jsx) in state hooks

App.jsx

import React, {useEffect, useState} from 'react';
import Form from './components/Form';
import Table from './components/Table';
import axios from 'axios';


const App = () => {

  const [data, setData] = useState({data:[]});
  const [editData, setEditData] = useState([]);

  const create = (data) => {
    axios.post('http://localhost:5000/info',data).then((res) =>{
      getAll();
    })
  }

  useEffect(() =>{
    getAll();
  },[])

  const getAll = () =>{
    axios.get("http://localhost:5000/info").then((response) =>{
      setData({
        data:response.data
      })
    })
  }

  const update = event =>{
    setEditData(data)
    console.log(data); // THIS "data" is the prop that i need to pass to Form.jsx component
  }


  return (
    <div>
        <div>
            <Form myData={create} editForm={editData} />
        </div>
        <div>
            <Table getData={data} edit={update} />
        </div>
    </div>
  );
};

export default App;

i want that "data" value form App.jsx component as props in this Form.jsx component

Form.jsx

    import React, {useState} from 'react';


const Form = (props) => {

  const [formData, setFormData] = useState({ Name:'', Age:'', City:''});


  const infoChange = e => {
    const { name,value} = e.target;
    setFormData({
      ...formData,
      [name]: value,
    })
  }

  const infoSubmit = e =>{
    e.preventDefault();
    let data={
      Name:formData.Name,
      Age:formData.Age,
      City:formData.City
    }
    props.myData(data);
  }


  const componentWillReceive = (props) => {  // i want the props data here 
      console.log(props.data);             // in class component they use componentWillReceiveRrops ,
    }                                         // is there any alternative for function based component to receive props?
    

  return (
    <div>
  <form onSubmit={infoSubmit} autoComplete="off">
    <div>
      <label>Name:</label>
      <input type="text" onChange={infoChange} name="Name" value={formData.Name} placeholder="Enter Name" />
    </div>
    <div>
      <label>City:</label>
      <input type="text" onChange={infoChange} name="City" value={formData.City}
        placeholder="Enter City" />
    </div>
    <div>
      <label>Age:</label>
      <input type="text" onChange={infoChange} name="Age" value={formData.Age} placeholder="Enter Age" />
    </div>
    <button type="submit">Submit</button>
  </form>
</div>
  );
};

export default Form;

i have commented the area of problem within the code , you can ignore the return () block of code.

Sorry for silly questions but THANKYOU Very Much !!! in advance

CodePudding user response：

Use the following code in Form.jsx, the useEffect will listen the change of props.data and update the value

  useEffect(() => {
    setFormData(props.data);
  },
  [props.data]);

For more information, you may check the following answer https://stackoverflow.com/a/65842783/14674139