В следующем коде Как изменить код, чтобы он отображал подробные данные о соответствующем имени, когда я нажимаю кнопку notes.name?

Question

https://codesandbox.io/s/react-example-m9l6j?fontsize=14

Я новичок, чтобы отреагировать. Вы можете показать рабочий код в codeandbox, заранее спасибо

В следующем коде Как изменить код, чтобы он отображалсяодолжил детали соответствующего имени, когда я нажму кнопку 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>
  );
}

Answer 1

Пожалуйста, проверьте решение здесь, https://codesandbox.io/s/react-example-8f0jy?fontsize=14.

Я пытался сохранить идентификатор в качестве ссылки, когда пользователь нажимает кнопку. А затем попробуйте отфильтровать заметки на основе идентификатора.

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>
  );
}