Get value of multiple inputs grade

[ricardoaguilarm]

Hello! Does anyone know how to get the value of all these input grades in a single array? I’m a bit confused how to do it
I’m using React.
CodeSandbox: MultipleInputs-Issue - CodeSandbox

Code:

import React from "react";

interface Props {
  disable?: boolean;
  value?: number;
}

const GradientRange: React.FC<Props> = ({ disable, value }) => {
  const [rangeValue, setRangeValue] = React.useState<number>(50);

  const handleRangeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setRangeValue(parseInt(event.target.value));
  };

  return (
    <div className="flex items-center gap-2">
      <p className=" font-raleway font-semibold text-sm text-[#333333]">Nada</p>
      <input
        type="range"
        min="0"
        max="100"
        value={value ?? rangeValue}
        onChange={handleRangeChange}
        className="range appearance-none w-full h-3 bg-gradient-to-r from-red via-yellow to-[#5EBF53] rounded-full outline-none "
        disabled={disable}
      />
      <p className=" font-raleway font-semibold text-sm text-[#333333]">
        Mucho
      </p>
    </div>
  );
};

export default GradientRange;

import GradientRange from "./input-range";
import "./styles.css";

export default function App() {
  const skillData = {
    skill: {
      data: {
        id: "1",
        attributes: {
          title: "Title",
          skill_uuid: "",
          reflection: {
            instructions:
              "Una vez terminado el trabajo en esta habilidad, te pedimos contestar brevemente las siguientes preguntas sobre tu experiencia. De (4) mucho a (1) nada:",
            questions: [
              {
                name:
                  "Considero que mi nivel respecto a los conocimientos sobre el tema antes de comenzar esta habilidad es…"
              },
              {
                name:
                  "Algunas ideas que solía tener en relación con el tema de esta habilidad han cambiado."
              },
              {
                name:
                  "Pude solucionar los problemas que me encontré mientras trabajaba en esta habilidad."
              },
              {
                name:
                  "La práctica de esta habilidad ha beneficiado el aprendizaje de mis estudiantes."
              },
              {
                name:
                  "Considero que con esta experiencia he mejorado mi práctica docente."
              }
            ]
          }
        }
      }
    }
  };

  return (
    <div className="App">
      {skillData?.skill.data.attributes.reflection.questions &&
        skillData?.skill.data.attributes.reflection.questions.map(
          (data: any, index: number) => (
            <div
              className="font-raleway font-semibold text-sm flex flex-col gap-2 my-4"
              key={index}
            >
              <div>
                <p>
                  <span>{index + 1}</span>
                </p>
                <p>{data.name}</p>
              </div>
              <div>
                <GradientRange />
              </div>
            </div>
          )
        )}
    </div>
  );
}

[bappyasif]

hello and welcome back to fcc forum

@ricardoaguilarm

how to get the value of all these input grades in a single array?

• why not after or during or before “rendering” those value store them in an array, or thats not an option? or thats what you are asking?

happy coding