0

Buen día! Necesito ayuda😔 Tengo que hacer un formulario que tenga Materia y calificación. Pero las materias las voy trayendo de un .map, ya que depende de qué curso sea, traerá distintas materias. Lo que no estoy logrando es que por cada materia me traiga un select para elegir la calificación, así eso lo voy guardando en un objeto que tenga materia->calificación. Alguien se le ocurre como puedo hacerlo?

2
  • ¿Podrías colocar datos de ejemplo? Los arrays del map, la data a mostrar, etc. el 15 jul. 2021 a las 4:35
  • Hola Basco, te invito a que leas las sección de cómo preguntar es.stackoverflow.com/help/how-to-ask De esta forma podremos ayudarte con tu problema el 21 jul. 2021 a las 13:55

1 respuesta 1

0

espero que te sirva.

import React, {useState} from 'react';

const categorias = [
 {
   "nombre" : "Audio",
   "articulos" : ["Monitor Led 27" , "Parlante Blurtooh", "Smart Tv 65"]
 },
 {
  "nombre" : "Ferreteria",
  "articulos" : ["Martillo pequeño" , "Taladro", "Serrucho"]
}

]

console.log("categorias", categorias)

function Menu() {

  const [idArticulos, setIdArticulos] = useState(-1);

  const handlerCargarArticulos = function (e){
  const opcion = e.target.value;
  console.log(opcion);
  
  setIdArticulos(opcion);

  }
  

    return (
        <div>
            <h3>Categorias</h3>
            <select name="categorias" id="selCategorias" onClick={handlerCargarArticulos}>
              <option value={-1}>Seleccione una opción: </option>
              {
                categorias.map((item, i)=>(
                  <option key={"categoria"+i} value={i}> {item.nombre}</option>
                ))
              }
            </select>
            <div></div>
            <h3>Articulos</h3>
            <select name="articulos" id="selarticulo">
              {
                idArticulos > -1 && 
                (
                  categorias[idArticulos].articulos.map((item,i)=>(
                    <option key={"articulo"+i} value="">{item}</option>
                  ))
                )
              }
            </select>

            

            
        </div>
    )
}

export default Menu

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.