CODEWITHSUNDEEP
reactjs
Somi
Somi

Reputation: 141

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

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

Upvotes: 0

Views: 682

Answers (2)

Ziwon
Ziwon

Reputation: 749

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

Upvotes: 1

Erfan
Erfan

Reputation: 1802

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

  ...

Upvotes: 1

Related Questions