Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

275
Views
pass an array from a child to parent ReactJS

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

almost 4 years ago · Santiago Trujillo
3 answers
Answer question

0

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}/>
    </>
    )
  }
}
almost 4 years ago · Santiago Trujillo Report

0

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

almost 4 years ago · Santiago Trujillo Report

0

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}/>
</>
)
}
almost 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!