Estoy haciendo un rastreador de gastos de reacción. Tengo mi aplicación y dentro de ella tengo un componente de formulario con un botón. Luego tengo un componente TableData al que paso la entrada de estado a través de accesorios. Sin embargo, cuando lo envío, no publica otra fila de la tabla debajo de la tabla, solo permanece en uno. Me imagino que necesito mapear algo. Intenté mapear el accesorio de entrada de estado y pasarlo de esa manera. Pero no estoy logrando lo que quiero. Tampoco puedo encontrar lo que necesito en Google. Cualquier pista sería increíble gracias. Nota al margen nueva en el uso de stackOverflow, así que si arruiné mi publicación, me disculpo
<tr className='tableRow'> <td>{props.userState.payment}</td> <td>{props.userState.purchase}</td> <td>{props.userState.date}</td> <td>{props.userState.location}</td> <td>{props.userState.price}</td> <td><button onClick={onButtonClick}>X</button></td> </tr> Above code is TableData.js Below code is in my Form.js <TableData userState={formValues}Debe tener formValues como una matriz de objetos de fila, para asignar cada objeto a cada fila. Entonces, cuando lo agregue, se insertará en la matriz y se mostrará en la tabla.
Dentro de tableData, debe mapear userState como se muestra a continuación:
{props.userState?.map(rowItem => ( <tr key={rowItem.id} className='tableRow'> // pass any unique value(id) to key <td>{rowItem.payment}</td> <td>{rowItem.purchase}</td> <td>{rowItem.date}</td> <td>{rowItem.location}</td> <td>{rowItem.price}</td> <td><button onClick={onButtonClick}>X</button></td> </tr> ))}la clave es importante en el mapeo: https://betterprogramming.pub/why-react-keys-matter-an-introduction-136b7447cefc