[Solved]-React Matrix of Radio buttons-Reactjs

you're pretty much making a form with a few rows of multiple choice answers.

one way of simplifying everything is to have all the logic in the top component, in your case i think mainpage would be where it would be. pass down a function as a prop to all the descendants that allows them to update the form data upstream.

in q2, how do intend to check the state for each row? perhaps you can use arrays or objects to keep track of the status of each question. the arrays/objects are stored in state, and you just check them to see what the status is.

i'm actually not clear what your app looks like - what does a row look like? (you might want to post a screenshot) and i don't see any way for rank to be selected - i don't even see what the ranks are for, or how they are used in the form. so perhaps your form design needs to be tweaked. you should begin the form design with a clear picture in your mind about how the app will work. maybe start by drawing the screens on paper and drawing little boxes that will represent the objects/array variables and go through the process of a user using your app. what happens to the various boxes when they click radio buttons and so on. how will you know if the same rank is selected twice - where are the selected ranks stored? what animals are clicked/selected? where are those stored? draw it all on paper first.

array or objects: if you want to keep it simple, you can do the whole project just using arrays. you can have one array that stores all the animals. you can have a different array that stores which animals are selected right now (use .includes() to test if an animal is in that array). you can have another array that stores the rows that have a rank selected. when the number of elements in that row === the number of rows (is that the same as the number of animals? if yes, then you can use the length of the animals array for that test)

how do you know if the rows with a rank selected are unique? one way is to disallow selected a rank that has already been selected. again, use .includes() (e.g. arrselectedranks.includes(num)) to check if a rank has already been selected.

so what do one of these checks look like?

const handleanimalselect = (animal) => {
   const err = this.state.selectedanimals.includes(animal);
   if (err === true){
       this.setstate(error: animal);
   }
}

return (
  <input
     type="radio"
     name={this.props.animalname}
     value={i}
     onclick={this.handleanimalselect}
  />

  { error !== undefined && (
    <div class={style.errormessage}>{`animal ${} was chosen twice`}</div>
  )}

);


};

remember: state is what you use for remembering the value of variables in a given component. every component has its own state. but props are for data/functions/elements that are passed into the component. you don't update the values of props in the component (prop values are stored in another component. if you need to update them, you use functions to pass data back to the parent component where that variable is in state, and update the value there).

here is an example that uses .includes() to check for the presence/absence of something:

https://stackoverflow.com/a/64486351/1447509