Passing Array of Items - React

Question

I'm attempting to get data from an array from ComponentOne to ComponentTwo. The state lives in App.js. This is sort of working as I can see the data when console.logging from ComponentTwo. However the data does not show on screen with the <p> {props.PhaseThreeItems[0] } </p> code.

Two questions:
#1: Am I going about this the correct way?
#2: Why is the data not showing on screen?

// App.js:

const [phaseThreeArray, setPhaseThreeArray] = useState([])

<ComponentOne PhaseThreeArrayProp={phaseThreeArray}/> 

<ComponentTwo PhaseThreeItems={phaseThreeArray}/>

...

// ComponentOne
            
const checkInput = () => {
props.PhaseThreeArrayProp.push("my data");
}

...

// ComponentTwo

const showData = () => {
console.log(props.PhaseThreeItems[0])
}  
<p> {props.PhaseThreeItems[0] } </p>

No just text ["item one", "item two"]

AndrewLeonardi
– AndrewLeonardi

2022-05-03 20:22:58 +00:00
Commented May 3, 2022 at 20:22 — AndrewLeonardi
– AndrewLeonardi, Commented May 3, 2022 at 20:22

plusheen · Accepted Answer · 2022-05-03 20:24:38Z

2

React ... reacts... to state changes. This means that you have to tell react "this has updated", via your setPhaseThreeArray property. What you have done is manually call push, rather than setting the state. React isn't aware of any data changes, and as such, doesnt update.

To fix this, you need to set the state using the function. The quickest way of doing it would be:

// App.js:

const [phaseThreeArray, setPhaseThreeArray] = useState([])

<ComponentOne setPhaseThreeArray={setPhaseThreeArray} PhaseThreeArrayProp={phaseThreeArray}/> 

<ComponentTwo PhaseThreeItems={phaseThreeArray}/>

// ComponentOne
            
const checkInput = () => {
  props.setPhaseThreeArray([...props.PhaseThreeArrayProp, "my data"])
}

This will set the state with the new array.

answered May 3, 2022 at 20:24

plusheen

1,4741 gold badge16 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing Array of Items - React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related