Need to Pass props to other components in hook

Question

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

Answer 1

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