Estas son publicaciones diferentes con los mismos campos de texto, es decir, comentar con el mismo estado de uso Quiero obtener el valor de un campo de texto deseado y otros campos de texto no deberían obtener su valor. Es como publicaciones de Facebook, pero no puedo entender cómo hacerlo.
const PostTemplate = (props) => { const { data, user, MakeComment } = props; const [comment, setComment] = React.useState(""); const HandleSubmit = (event) => { // event.preventDefault(); //console.log(comment); console.log the value that gives the value of that particular textfield }; return ( <div> {data.map((item) => { return ( <div className={classes.HomeCard} key={item._id}> <div className="card-image"> <img src={item.photo} /> </div> <div className="card-content"> <h6>{item.title}</h6> <p>{item.body}</p> {item.comments.map((record) => { return ( <h6 key={record._id}> <span style={{ fontWeight: "500" }}> {record.postedBy.name} </span>{" "} {record.text} </h6> ); })} <TextField value={comment} onChange = {(e)=>setComment(e.target.value)} /> <Button onClick={HandleSubmit}>Submit</Button> </div> </div> ); })} ); })} </div> ); }; export default PostTemplate;Creé un estado para entradas que es una matriz de objetos, cada objeto tiene una propiedad de identificación y texto, cuando una de las entradas cambia obtenemos su identificación y valor en la función CommentInputOnchange y actualizamos el estado, en esa función, yo encuentre un objeto que tenga la misma identificación, luego actualice la propiedad de texto y al final actualizo el estado
import { useState } from "react"; const data = [ { _id: 1, photo: "", title: "title1", body: "body1", comments: [{ _id: 1, postedBy: { name: "a" }, text: "abc" }] }, { _id: 2, photo: "", title: "title2", body: "body2", comments: [] } ]; //Fill Comment Input State Based on Data, Push an object with id and text to that const initialCommentInputValues = []; data.forEach((d) => { initialCommentInputValues.push({ _id: d._id, text: "" }); }); export default function App() { const [commentInputValues, setCommentInputValues] = useState( initialCommentInputValues ); const HandleSubmit = (event) => {}; //each input send its id and value here and we change the state const commentInputOnChange = (id, value) => { console.log({ id, value }); const newCommentInputValues = [...commentInputValues]; const inputValue = newCommentInputValues.find((x) => x._id === id); inputValue.text = value; setCommentInputValues(newCommentInputValues); }; return ( <div> {data.map((item) => { return ( <div key={item._id}> <div className="card-image"> <img src={item.photo} /> </div> <div className="card-content"> <h6>{item.title}</h6> <p>{item.body}</p> {item.comments.map((record) => { return ( <h6 key={record._id}> <span style={{ fontWeight: "500" }}> {record.postedBy.name} </span>{" "} {record.text} </h6> ); })} <input value={commentInputValues.find((x) => x._id === item._id).text} onChange={(e) => commentInputOnChange(item._id, e.target.value)} ></input> <button onClick={HandleSubmit}>Submit</button> </div> </div> ); })} </div> ); }