如何在反应中将数组从子组件发送到父组件？

Question

I am creating a react application where I have to send an array from child component to parent component. I am trying to send using callback function now but its not working.

Here's my child component:

var apis=[]
export default class ApiDropDown extends React.Component {
  constructor() {
    super();
    this.state = {
      options: [],
      suboptions: [],
    };
  }

  componentDidMount() {
    this.fetchOptions();
  }

  fetchOptions() {
    fetch("http://localhost:5000/groups")
      .then((res) => {
        return res.json();
      })
      .then((json) => {
        this.setState({ options: json });
      });
  }
  //SETTING THE apis here,just adding few elements,its a long function
  onSubmit()
  {
    this.props.apisgranted(apis)
  }


  render() {
  
    return (
      
       
        <div>
          <button type="button" className="btn" onSubmit={this.onSubmit}> //Save button to set data in the prop.
            Save
          </button>
        </div>
      
    );
  }
}

Now here's my parent component:

const AddTask = ({ onAdd, onStatusChange }) => {
  const [client_name, setText] = useState("");
  const [status, setStatus] = useState("");
  const [showMessage,setMessage]=useState(false)
  const [apigrants,setapigrants]=useState([])

  
 const handleApiGrants = (langValue) => {
    
    setapigrants(langValue) //setting the props array here from child component
    console.log(apigrants)  //nothing gets printed here
}


 

 
  
  return (
    <form className="add-form" onSubmit={onSubmit}>
      <div>
   
      <button onClick={setmessage.bind(false, true)} type="button" className="btn">Grant API's</button>
      
      { showMessage && (<ApiDropDown apisgranted={handleApiGrants} />) } //calling the props handling function where which should set the apigrants array with props array.
      
      </div>

In my child component,I am using onSubmit function to set the array to prop. In my parent component,First i am declaring apigrants array as empty and later assigning it to prop array from child component using handleApiGrants function.

Answer 1

The easiest way to do that would be to define the variable in the parent component and also pass it down to the child, like you do with handleApiGrants