state can not set in functional component - reactjs

Question

i send dataSource parameter to flowing functional component, dataSource has data but chartOptions state can not set.
thanks...
import React, { useEffect, useState } from "react";
const Trend = ({ dataSource }) => {
const [chartOptions, setChartOptions] = useState({
series: {
data: dataSource.map(x => {
return ["TEST1", "TEST2"];
})
}
});
console.log(chartOptions);
return (
<div>
<h1>TEST</h1>
</div>
);
};
export default Trend;

Answer 1

You should set it as this, as it sets state before the dataSource arrives.
Try using useEffect and set the state there like
useEffect(() => {
const data = dataSource.map(x => {
return ["TEST1", "TEST2"];
});
setChartOptions(
series: {
data: data
}
);
},[dataSource]);

Answer 2

To calculate the value of your own state from a prop you should use useEffect and include this prop in the hook useEffect within the dependency array so that whenever it changes the value of the state is updated.
Yo can see it in the React documentation, useEffect hook
This could be an implementation:
import React, { useEffect, useState } from "react";
const App = ({ dataSource }) => {
const [chartOptions, setChartOptions] = useState({});
useEffect(() => {
setChartOptions({
series: {
data: dataSource.map(x => {
return ["I'm ", "test2"];
})
}
});
}, [dataSource]);
return (
<div>
<h1>
{chartOptions.series &&
chartOptions.series.data.map(chartOption => <div>{chartOption}</div>)}
</h1>
</div>
);
};
export default App;
Here's an example
PD: If you want a more extensive explanation about useEffect (it is quite complex) and where you will solve doubts about updating the state through props, etc I attach an article by one of the developers of React that I think is very interesting.

Answer 3

Lazy initial state -
If the initial state is the result of an expensive computation, you may provide a function instead, which will be executed only on the initial render:
const [state, setState] = useState(() => {
const initialState = {
series: {
data: dataSource.map(x => {
return ["TEST1", "TEST2"];
})
}
}
return initialState;
});