Mi pregunta puede no ser clara, pero aquí está mi problema. Aquí está mi tarjeta que obtuve de una matriz usando el método de mapa y muestro cada elemento en cada tarjeta. Y activé el botón "Editar" para que muestre el texto oculto (quiero ver esto en una sola tarjeta). Pero cuando hago clic en una sola tarjeta, todas las tarjetas muestran ese mensaje oculto. ¿Podrías ayudarme?
Quiero ver el texto "Quiero ver esto en una sola tarjeta" en esa tarjeta donde se hace clic en el botón Editar
Aquí están mis códigos:
const [edit, setedit]= useState(false) <Grid container spacing={5} className="main-grid" > {allitems.map((oneitem, index) => { return ( <Grid item key={index} md={3} className="itemGrid" > <Card className="card"> <CardContent> <Typography className="" color="textSecondary" gutterBottom> {oneitem.title} </Typography>/ <p variant="h5" component="h2" className="description"> {oneitem.description} </p> <p className="" color="textSecondary"> Created At: {oneitem.createdAt} </p> <Button size="small" onClick={()=> deleted(oneitem._id)} >Delete</Button> <Button size="small" onClick={()=>setedit(!edit)} >Edit</Button> <-here is the problem {edit && <h1>Want to see this in only one card</h1>} </CardContent> Está utilizando un único valor de estado de edit booleano para activar el modo de edición de todos los elementos asignados.
Use algún estado de edit que pueda correlacionar con sus datos, como el índice o una propiedad de id de elemento. Como no veo ningún GUID utilizado, haré una demostración con index.
Use el índice de elementos para identificar qué está en modo "editar", nulo significa que nada tiene el modo "editar".
const [editIndex, setEditIndex]= useState(null);Actualice el botón de alternancia para alternar un nuevo índice o volver a nulo si se hace clic en el mismo botón
<Button size="small" onClick={() => setEditIndex(editIndex => editIndex === index ? null : index)} > Edit </Button> Haga coincidir el estado editIndex guardado con el elemento asignado actualmente para representar condicionalmente el mensaje.
{editIndex === index && <h1>Want to see this in only one card</h1>}Veo que tienes un botón de borrar:
<Button size="small" onClick={()=> deleted(oneitem._id)} >Delete</Button> Si está eliminando elementos de los datos subyacentes, querrá no usar el índice de matriz como la clave React. En su lugar, debe usar una propiedad de identificación única, como _id , de cada elemento ( solo necesitan ser únicos entre hermanos ). Entonces, en lugar de usar el índice para establecer el modo de "edición", usaría _id en su lugar.
Este problema surge porque está utilizando un valor de edición común en todo el mapa. Entonces, si cambia el valor principal de "editar" a "verdadero" (como en este caso), considerará la edición como verdadera para todas las tarjetas.
No, esto es lo que puede intentar hacer (estoy considerando que puede editar solo una tarjeta a la vez) en lugar de mantener la edición como un valor booleano (verdadero | falso) utilícelo como un valor entero para almacenar el índice de la tarjeta en tu matriz.
Pasos :
setEdit(editVal) => { if(this.state.edit === editVal){ this.setState({ edit: null }) } else{ this.setState({ edit: editVal } } } onClick={()=> setEdit(index)}
Ahora, cada vez que hace clic en el botón de edición, el valor de edición cambia a un nuevo valor de índice o a un valor nulo.
Un último cambio es reemplazar esto:
{edit && <h1>Want to see this in only one card</h1>}
con este
{edit===index && <h1>Want to see this in only one card</h1>}
Concluyendo:
Primero movimos el valor de edición a Entero o nulo. Luego, al hacer clic en editar, el valor de índice del elemento en la matriz se asigna a "editar". una vez que esto sucede, estamos verificando si el valor de edición es igual al valor del índice (paso 5), si es así, muestra el mensaje solo para esa tarjeta. Una vez que haga clic en editar nuevamente, el valor de "editar" se vuelve nulo (si se hace clic en la misma tarjeta).