What I am trying to do: I want to add all elements into my array
Actual result: My array is being overwritten
As seen from my codesandbox, the output should be helloworld, but it is only showing world.
Parent.js
import "./styles.css";
import { useState } from "react";
import Child from "./Child";
export default function Parent() {
const [arr, setArr] = useState([]);
return (
<div className="App">
<Child setArr={setArr} />
{arr}
</div>
);
}
Child.js
import { useEffect } from "react";
export default function Child(props) {
useEffect(() => {
props.setArr("hello");
props.setArr("world");
});
return (
<div className="Child">
<h1>This is child componemnt</h1>
</div>
);
}
This is my codesandbox link
You overwriting your array with a string, the trick is to create a shallow copy of your value and mutate the new copy. and then set the state afterwards:
import "./styles.css";
import { useState } from "react";
import Child from "./Child";
export default function Parent() {
const [arr, setArr] = useState([]);
return (
<div className="App">
<Child setArr={setArr} arr={arr} />
{arr}
</div>
);
}
import { useEffect } from "react";
export default function Child(props) {
useEffect(() => {
const nextArr = [...props.arr];
nextArr.push("hello", "world");
props.setArr(nextArr);
}, []);
return (
<div className="Child">
<h1>This is child componemnt</h1>
</div>
);
}