I have a condition where I have to create a mon ponent which will be used at different places like given below.

Step 1

Step 2

In both the above steps I have use the same ponent, just the questions asked are different.

   stepOne: [
      {
        title: "Is your age less than 18 ?",
        name: "age",
        answer: 0
      }
    ],
   stepTwo: [
      {
        title: "Have you been to some trip previously ?",
        name: "trip",
        answer: 0
      },
      {
        title: "Do you like adventurous sports ?",
        name: "sportActive",
        answer: 0
      }
    ],

I have successfully managed to do this but with class ponents but now I want to use react hooks "useState()"

Below is the a dumy code to my query. I will be sending step_1 and step_2 in "data" paramameter.

export function YesNo({ data, setAnswer }) {
  for(let i in data){
    const [---] = useState(data[i].answer);
  }

So the question is how to create the dynamic variable and use them with useState(), Is this approach wrong or I didn't got the hooks concept correctly.

I have a condition where I have to create a mon ponent which will be used at different places like given below.

Step 1

Step 2

In both the above steps I have use the same ponent, just the questions asked are different.

   stepOne: [
      {
        title: "Is your age less than 18 ?",
        name: "age",
        answer: 0
      }
    ],
   stepTwo: [
      {
        title: "Have you been to some trip previously ?",
        name: "trip",
        answer: 0
      },
      {
        title: "Do you like adventurous sports ?",
        name: "sportActive",
        answer: 0
      }
    ],

I have successfully managed to do this but with class ponents but now I want to use react hooks "useState()"

Below is the a dumy code to my query. I will be sending step_1 and step_2 in "data" paramameter.

export function YesNo({ data, setAnswer }) {
  for(let i in data){
    const [---] = useState(data[i].answer);
  }

So the question is how to create the dynamic variable and use them with useState(), Is this approach wrong or I didn't got the hooks concept correctly.

• javascript
• reactjs
• react-hooks

1 Answer 1

You could do something like this:

Basically the magic line is this one [evt.target.name]: {

It is a new feature from ES6 Computed property names

More about it https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

function App() {
  const [steps, setSteps] = useState({});

  function onClick(evt) {
    setSteps({
      [evt.target.name]: {
        value: evt.target.name
      }
    });
  }

  console.log(steps);

  return (
    <div className="App">
      <button onClick={onClick} name="step-one">
        ste one
    </button>
      <button onClick={onClick} name="step-two">
        ste two
    </button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);