Does passing useState as a props to an variables make issues? - reactjs

Question

Currently, I'm trying to use useState to change a value to an object.
However, the thing I've done doesn't make any errors.
So, I want to know if the way i use UseState is making issues later.
So, my code is like this :
this is where I make useState :
export const SettingContextProvider = props => {
const [title, setTitle] = useState({});
const [label, setLabel] = useState({});
}
and I pass to this component:
const DataSettingPage = () => {
const { layoutValue, chartValue, MainPage } = useContext(CommonStateContext);
const { SetTitle, SetLabel, SetDatas, SetLabels } = useContext(SettingContext);
const [changeLayout] = layoutValue;
const [chart] = chartValue;
const [title, setTitle] = SetTitle;
const [label, setLabel] = SetLabel;
{chart[index].key === "Bar" && (
<BarChart
title={title[id]}
label={label[id]}
/>
)}
and I'm using that state to here as a props :
import React from "react";
import { Bar } from "react-chartjs-2";
const BarChart = ({ title, label }) => {
let data = {
labels: [],
datasets: [
{
label: label,
data: [],
backgroundColor: ["#a7def8e1"],
},
],
};
return (
<>
<Bar
data={data}
options={{
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: title,
color: "#345fbb",
font: { size: 22 },
},
},
}}
/>
</>
);
};
export default BarChart;
Thank you in advance

Answer 1

You don't need to destructure the passed value further in your child components.
these lines aren't needed:
const [title, setTitle] = SetTitle;
const [label, setLabel] = SetLabel;
Also, I didn't find SetDatas and SetLabels anywhere in your code, have you defined them?
Apart from these two issues, it is perfectly fine to define a state in a parent component and pass both the value and the function to the children:
Parent:
export const SettingContextProvider = props => {
const [title, setTitle] = useState({});
const [label, setLabel] = useState({});
return (<SettingContext.Provider value={[title,setTitle,label,setLabel]}>
<DataSettingPage/>
</SettingContext.Provider>
Child:
const DataSettingPage = () => {
const { layoutValue, chartValue, MainPage } = useContext(CommonStateContext);
const [title,setTitle,label,setLabel] =
useContext(SettingContext); // you can use them as needed
...

Answer 2

Are you calling React.createContext for your context objects? If not I believe your code may have issues as it's not the correct way to use useContext() according to React docs.
Your BarChart component looks like it's missing most of the data (only taking title and one label), so you should fill those in properly.
I would suggest to delete SettingContextProvider completely and simplify the DataSettingPage component as so:
const DataSettingPage = ({title, label}) => {
// I'm not sure what these are for so just leaving them here.
const { layoutValue, chartValue, MainPage } = useContext(CommonStateContext);
const [changeLayout] = layoutValue;
const [chart] = chartValue;
// DELETE
// const { SetTitle, SetLabel, SetDatas, SetLabels } = useContext(SettingContext);
const [title, setTitle] = useState(title)
const [label, setLabel] = useState(label)
{chart[index].key === "Bar" && (
<BarChart
title={title[id]} // <-- Where does your "id" come from??
label={label[id]}
/>
)}