¿Cómo puedo agregar un valor clave a una matriz de objetos? Estoy obteniendo una API y quiero agregar valor a una matriz particular de estudiante/persona a partir de la entrada del usuario. Digamos que hacemos clic en la entrada de la primera lista y escribimos xyz, debería agregar una etiqueta: 'xyz' y luego, si agregamos abc, entonces tiene que ser la etiqueta: ['xyz', 'abc']. Soy totalmente nuevo en reacciona así que perdóname si algo está terriblemente mal.
import React from "react"; import "./App.css"; export default class FetchRandomUser extends React.Component { state = { loading: true, people: [], input: '', } async componentDidMount() { const url = "https://api.hatchways.io/assessment/students"; const response = await fetch(url); const data = await response.json(); this.setState({ people: data.students, loading: false }); // } onChangeHandler(e) { this.setState({ input: e.target.value, }) } render() { if (this.state.loadin) { return <div>loading...</div>; } if (!this.state.people.length) { return <div>didnt get person...</div>; } const list = this.state.people.filter(person => this.state.input.toLowerCase() === '' || person.firstName.toLowerCase().includes(this.state.input.toLowerCase()) || person.lastName.toLowerCase().includes(this.state.input.toLowerCase())) .map(person => ( <div key={person.id}> <li> {JSON.stringify(person.firstName)} {JSON.stringify(person.lastName)} {/*want to add newTag value for particular person in list */} <input type="text" /> {/* and display it here */} </li> </div> )); return ( <div> <div className="example1"> {/* this input will search and filter person based on first and last name */} <input value={this.state.input} type="text" onChange={this.onChangeHandler.bind(this)} /> <ul>{list}</ul> </div> </div> ) } }En caso de que entienda su pregunta correctamente, esta es una de las formas en que puede agregar un valor clave a su objeto:
var obj ={ a: 1, b: 2 }; obj.c = 5 console.log(obj); output Object { a: 1, b: 2, c: 5 }ya que desea hacer esto para un estudiante específico, debe haber una lógica para encontrar primero al estudiante correcto. por lo que debe recorrer la matriz de sus estudiantes.
const data = [your array] const updatedData = data.map(student =>{ if (student.id === person.id) {// you need to use the correct key names here student = {... student, tag: "xyz" // this xyz comes from you input, you need to adjust here } } return student })después de eso, puede procesar los datos correctos. Tenga en cuenta que acabo de escribir cómo actualizar una matriz solo una vez. Como está utilizando reaccionar, debe aplicar esta lógica para actualizar su estado. Entonces, cada vez que hay una actualización, también se debe actualizar el estado.