How can I repeat a function and variable?

Question

I'm new to react.js

and I'm trying to make many of these functions and useState and variables my code is like this:

 const [title, setTitle] = useState("");
  const [state, setState] = useState({});
  let [getId, setGetId] = useState([]);
  const [info, setInfo] = useState([]);

  const clickCheck = title => e => {
    setState({
      ...state,
      [title]: [e.currentTarget.value],
    });

    setGetId([...getId, e.currentTarget.id]);
  };

  if (getId.length > 2) {
    getId = [];
  }

  let axis = [
    info.map(i => i[getId[0]]).slice(1, undefined),
    info.map(i => i[getId[1]]).slice(1, undefined),
  ];
  console.log(getId);
  let chartData = {
    labels: axis[0], //x값
    datasets: [
      {
        label: title,
        data: axis[1], //y값
        backgroundColor: [
          "rgba(255, 99, 132, 1)",
          "rgba(54, 162, 235, 1)",
          "rgba(255, 206, 86, 1)",
          "rgba(75, 192, 192, 1)",
          "rgba(153, 102, 255, 1)",
          "rgba(255, 159, 64, 1)",
        ],
      },
    ],
  };
  const chartArray = [
    <Line
      key="o"
      data={chartData}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
    <Bar
      key="p"
      data={chartData}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
    <Pie
      key="q"
      data={chartData}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
    <Radar
      key="r"
      data={chartData}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
    <Doughnut
      key="s"
      data={chartData}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
    <Scatter
      key="t"
      data={chartData}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
    <PolarArea
      key="u"
      data={chartData}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
    <Bubble
      key="v"
      data={chartData}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
  ];

  ////second////////////////////////////////
  const [title2, setTitle2] = useState("");
  const [state2, setState2] = useState({});
  let [getId2, setGetId2] = useState([]);
  const [info2, setInfo2] = useState([]);

  const clickCheck2 = title => e => {
    setState2({
      ...state2,
      [title]: [e.currentTarget.value],
    });

    setGetId2([...getId2, e.currentTarget.id]);
  };

  if (getId2.length > 2) {
    getId2 = [];
  }

  let axis2 = [
    info2.map(i => i[getId2[0]]).slice(1, undefined),
    info2.map(i => i[getId2[1]]).slice(1, undefined),
  ];
  console.log(getId2);
  let chartData2 = {
    labels: axis2[0], //x값
    datasets: [
      {
        label: title2,
        data: axis2[1], //y값
        backgroundColor: [
          "rgba(255, 99, 132, 1)",
          "rgba(54, 162, 235, 1)",
          "rgba(255, 206, 86, 1)",
          "rgba(75, 192, 192, 1)",
          "rgba(153, 102, 255, 1)",
          "rgba(255, 159, 64, 1)",
        ],
      },
    ],
  };
  const chartArray2 = [
    <Line
      key="o"
      data={chartData2}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,

and I tried just copy and paste

I tried to use map and for loop but It doesn't work . What should I use for making another one?? without just copy and paste??

Answer 1

One of the best ways to handle complex states is to use useRedcuer as it is said in this link.

So based on that you can have a state manager like this:

const initialState = {title: "", title2: ""};

function reducer(state, action) {
  switch (action.type) {
    case 'change_title':
      return {title: action.value};
    case 'change_title2':
      return {title2: action.value};
    default:
      throw new Error();
  }
}

function Cmp() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Title: {state.title}
      Title2: {state.title2}
    </>
  );
}

Answer 2

@somi, you can try this by creating a parent component and put the below code there,

  const [title, setTitle] = useState("");
  const [state, setState] = useState({});
  let [getId, setGetId] = useState([]);
  const [info, setInfo] = useState([]);

Now you can pass state variables and their functions to your child component as props to update the state of parent.