CurrentNote -- po kliknięciu przycisku wyświetlany jest tylko 1 note {JS}

Question

Prosiłbym o wskazówkę jak match id buttona z id textarea , by wyświetlany mógł być tylko 1 note w tym samym czasie. I wchodził jakby na miejsce poprzednika(z innymi wartościami)[I przełączać między nimi]

KOD PARENT

import { react, useState } from "react";
import Notes from "./Notes";
function Notepad() {
	const [noteID, setNoteID] = useState(0);
	const [visible] = useState(false);
	function handleSubmit(e) {
		e.preventDefault();
		setNoteID((prevValue) => prevValue + 1);
	}
	function currentNote(id) {


		
	}
	return (
		<div>
			<button onClick={handleSubmit}>New Note</button>
			{[...Array(noteID).keys()].map((item) => {
				return <Notes key={item} noteID={item} selected={currentNote(item)} show={visible} />;
			})}
		</div>
	);
}
export default Notepad;

Child Componetnt 

import { useState } from "react";

function Notes(props) {
	const [Shown, setShown] = useState(props.show);

	function toggle(e) {
		e.preventDefault();
		setShown(!Shown);
	}

	return (
		<form action="return false" key={props.noteID} onClick={props.selected}>
			{Shown ? <textarea key={props.noteID} placeholder="Text Goes Here" name="textarea" /> : null}
			<button key={`Note` + props.noteID} type="submit" name="button" onClick={toggle}>
				Note {props.noteID + 1}
			</button>
		</form>
	);
}
export default Notes;

 

Comments

Coś takiego ma w ogóle sens? 

Parent 

function currentNote(e) {
		console.log(e.target.id);
		return e.target.id;
	}
	let NotesArray = [...Array(noteID).keys()].map((item) => {
		return <Notes id={item} key={item} noteID={item} selected={currentNote} show={visible} />;
	});

 

Child

			{Shown && props.selected === props.noteID ? <textarea id={props.noteID} key={props.noteID} placeholder="Text Goes Here" name="textarea" /> : null}

 

Answer 1

Nie rób pętli tylko wyświetl to co masz w danym momencie w noteID

 

  return (
    <div>
      <button onClick={handleSubmit}>New Note</button>
        {noteID?(<Notes
            key={noteID}
            noteID={noteID}
            selected={currentNote(noteID)}
            show={visible}
          />):""}
    </div>
  );

 

Comments

Jest to zrobione w taki sposób ponieważ chciał bym, po dodadniu mieć parę notek z innymi wartościami. I przełączać między nimi

---

Ale to nie są notatki tylko jakiś counter na bazie, którego wyświetlasz notatkę. Powinieneś raczej dodawać je do tablicy lub do json czy innej bazy danych i na podstawie tych obiektów edytować usuwać lub dodawać kolejne.