How can I get all the values from multiple select inputs on a button click? React

Question

I'm creating a questionnaire where the values of the select inputs are collected and averaged to produce a score. Seems easy enough, but I'm struggling to get them. Currently my goal is just to get the values to begin with, but it seems like I can only get the value for the last select input when I click the submit button, calling the handleClick() event.

I'm not sure if I'm doing it right. Through some guides I've seen others use the useRef() function, but I've seen the createRef() as well.

I'm using Gatsby JS and GraphQL for the data query. I appreciate any advice.

const Questionnaire = (props: Props) => {
  const data = props.data!
  const questionnaire = data.allContentfulQuestionnaire.edges
  let i = 0

  const selectInput = useRef()

  const handleClick = () => {
    for (const r in selectInput) {
      console.log("foo: ", selectInput.current.value)
      console.log("bar: ", r.valueOf())
    }
  }

  return (
    <Layout>
      <Container>
        {questionnaire?.map(({ node }: any) => (
          <>
            <h2>{node?.title}</h2>
            {node?.questions?.map(({ answers, question }: any) => (
              <Question key={question?.id}>
                <P>
                  {++i}. {question?.question}
                </P>

                <select key={question?.id} ref={selectInput}>
                  <option>Select Response</option>
                  {answers.map(({ title, id, score }: any) => (
                    <option key={id} value={score}>
                      {title}
                    </option>
                  ))}
                </select>
              </Question>
            ))}
          </>
        ))}

        <Submit onClick={handleClick}>Submit</Submit>
      </Container>
    </Layout>
  )
}

Answer 1

If you want to go with ref, you need n ref for n fields/select

 const Questionnaire = (props: Props) => { const data = props.data! const questionnaire = data.allContentfulQuestionnaire.edges let i = 0 const refs = node?.questions?.map(q => q.node?.questions?.map(useRef)); const handleClick = () => { // You have nested array of refs so you can get the desired values console.log(refs[0][0].current.value); } return ( <Layout> <Container> {questionnaire?.map(({ node }: any, outerIndex) => ( <> <h2>{node?.title}</h2> {node?.questions?.map(({ answers, question }: any, innderIndex) => ( <Question key={question?.id}> <P> {++i}. {question?.question} </P> <select key={question?.id} ref={refs[outerIndex][innderIndex]}> <option>Select Response</option> {answers.map(({ title, id, score }: any) => ( <option key={id} value={score}> {title} </option> ))} </select> </Question> ))} </> ))} <Submit onClick={handleClick}>Submit</Submit> </Container> </Layout> ) }