pass an array from a child to parent ReactJS

Question

i have an array in a component i want to export it or pass it to other component (parent)

child component:

export default function child(){

const arr = ["1020","52214","3325"]
return (
<div> child</div>
)
}

parent:

export default function parent(){

return (
<>
<div> parrent</div>
<child/>
</>
)
}

Answer 1

You can't pass data from child to parent.

You can pass like this.

const ParentPage = () => {

  const [arr , setArr ] = useState([])
  console.log(arr)  // [1,2,3]

  return (
    <ChildPage setArr={setArr} />
  );
}

const ChildPage = ({setArr}) => {
    return (
        <button onClick={()=> setArr([1,2,3]) }}> </button>
    );
}

or you can do with redux

Answer 2

In react we don't pass values from child to parent but the other way around: it's a one-way data flow!

You can useState to create a stateful value and a set-function in the parent, pass the set function to the child and allow it to set the value.

Example:

export default function child(props){

const arr = ["1020","52214","3325"];
props.setMyArray(arr);

return (
<div> child</div>
)
} 

---

import { useState } from 'react';

export default function parent(){
  const [myArray, setArray] = useState([]);

  return (
    <>
    <div> parrent</div>
    <child setMyArray={setArray}/>
    </>
    )
  }
}

Answer 3

You can use props to call a function in the parent element and pass an argument in the function from the child element.

Here's an example:

Child element:

export default function child(props){

const [arr,setarr]= useState(["1020","52214","3325"]);

return (
<div onclick={()=>{props.func(arr)}}> child</div>
)
}

Parent element:

export default function parent(){
 
function passvalue(arr){
   const passedvalue = arr; 
}


return (
<>
<div> parrent</div>
<child func={passvalue}/>
</>
)
}