状态更改的单个功能没有名称相似的多个状态

Question

I'm trying to create a function for the state change, on multiple states ...

I have the following states in the constructor()

this.state={
  answer1:"",
  answer2:"",
  answer3:"",
  answer4:"",
  answer5:"", 
  //answerN... (25 to be exact)
}

I have this Question component which is a <p> tag and 6 radio buttons for the question answers

I make 5 instances of this component

<Question addAnswer={this.addAnswer} title="...." />
<Question addAnswer={this.addAnswer} title="..." /> 
....

each calling the same function named addAnswer()

addAnswer = (answerValue) => {
  this.setState({answer1:answerValue},()=>console.log(this.state.answer1))
}

this function will change only the answer1 state

So how to make it something like this to work

addAnswer = (answerNumber,answerValue) => {
    this.setState({ answer + answerNumber: answerValue },()=>console.log(this.state.answer + answerNumber))
}

Is function like this possible?

Is there an option of making the answer state an Array and how will I determine which index of this array is answered and on later changed ???

Answer 1

I prefer to pass the whole name of the attribute as a parameter to the function, instead of just a number. I think it looks more readable and easy to understand.

Like this:

addAnswer = (answerCode, answerValue) => {
    this.setState({ [answerCode]: answerValue }, () => 
        console.log(this.state[answerCode])
    )
}

If I were you I would probably change the structure to look something like this:

{ 
    "answers": {
        1: {
            "code": 1,
            "value": "Yes"
        }
    }
}

Then, when you are passing the value to the reducer, you can pass the whole answer object:

{
    "code": 2,
    "value": "No"
}

And to add a new answer:

addAnswer = (answer) => {
    this.setState({ [answer.code]: answer })
}

Answer 2

I'd suggest you to iterate over some data array, which holds eg titles :

someArray.map((title, i) => (
   <Question addAnswer={() => this.addAnswer(answerValue, i)} title={title} />
);

Then you will be able to reference to an item on specified index i .

addAnswer = (answerValue, i) => {
  this.setState({ `answer${i}`: answerValue });
};

Note : You didn't specify from where answerValue prop comes from + i starts at 0 .