Reactjs 在下面的代码中，我如何更改代码，以便在单击notes.name按钮时显示相应名称的详细信息？

我是新的反应，你能不能在代码沙盒中显示工作代码，提前谢谢

在下面的代码中，我如何更改代码，以便在单击notes.name按钮时显示相应名称的详细信息

function Todo() {
  let notes = [
    {
      id: 1,
      name: "Brad",
      lent: [{ id: 1, amount: 1000 }, { id: 2, amount: 2000 }]
    },
    {
      id: 2,
      name: "John",
      lent: [{ id: 1, amount: 3000 }, { id: 2, amount: 4000 }]
    }
  ];
  const [state, setState] = React.useState(false);
  const handleClick = e => {
    setState(!state);
    console.log(e.target);
  };

  return (
    <div>
      {notes.map(note => (
        <ul key={note.id}>
          <button onClick={handleClick}>{note.name}</button>
        </ul>
      ))}
      {state &&
        notes[0].lent.map((
          mapper //how do I change index here?
        ) => (
          <ul key={mapper.id}>
            <li>{mapper.id}</li>
            <li>{mapper.amount}</li>
          </ul>
        ))}
    </div>
  );
}

函数Todo（）{
让注释=[
{
id:1，
姓名：“布拉德”，
出借：[{id:1，金额：1000}，{id:2，金额：2000}]
},
{
id:2，
姓名：“约翰”，
出借：[{id:1，金额：3000}，{id:2，金额：4000}]
}
];
const[state，setState]=React.useState（false）；
常量handleClick=e=>{
设置状态（！状态）；
console.log（如target）；
};
返回(
{notes.map（note=>(

{note.name}

))}
{州&&
notes[0].lent.map((
映射器//如何在此处更改索引？
) => (

{mapper.id}
{mapper.amount}

))}
);
}

请检查此处的解决方案

我尝试在用户单击按钮时将id存储为引用。然后尝试根据id筛选注释

function Todo() {
  let notes = [
    {
      id: 1,
      name: "Brad",
      lent: [{ id: 1, amount: 1000 }, { id: 2, amount: 2000 }]
    },
    {
      id: 2,
      name: "John",
      lent: [{ id: 1, amount: 3000 }, { id: 2, amount: 4000 }]
    }
  ];

  const [id, setId] = React.useState(-1);
  const handleClick = id => {
    setId(id);
  };

  return (
    <div>
      {notes.map(note => (
        <ul key={note.id}>
          <button onClick={() => handleClick(note.id)}>{note.name}</button>
        </ul>
      ))}
      {id >= 0 &&
        notes
          .filter(note => note.id === id)[0]
          .lent.map((
            mapper //how do I change index here?
          ) => (
            <ul key={mapper.id}>
              <li>{mapper.id}</li>
              <li>{mapper.amount}</li>
            </ul>
          ))}
    </div>
  );
}

函数Todo（）{
让注释=[
{
id:1，
姓名：“布拉德”，
出借：[{id:1，金额：1000}，{id:2，金额：2000}]
},
{
id:2，
姓名：“约翰”，
出借：[{id:1，金额：3000}，{id:2，金额：4000}]
}
];
const[id，setId]=React.useState（-1）；
const handleClick=id=>{
setId（id）；
};
返回(
{notes.map（note=>(

handleClick（note.id）}>{note.name}

))}
{id>=0&&
笔记
.filter（note=>note.id==id）[0]
.lent.map((
映射器//如何在此处更改索引？
) => (

{mapper.id}
{mapper.amount}

))}
);
}

尝试在此处发布您的解决方案，外部链接可能会丢失。