I would like that when I enter the field and validate the form field, the text is added at the bottom with all the AddNote component and the field value. At the same time that the field is empty at the validation of the form. My project looks a lot like a todo list.

At the moment when I enter the value in the text field and validate the form, the value goes to the bottom with the AddNote component. But the value stays and changes in real time if I modify the text

// in note.js

import React from 'react';
import AddNote from './addnote';

class Note extends React.Component {

    constructor(props) {
        super(props);
        this.state = { value: '', isTextDisplayed: false };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({ value: event.target.value });
    }

    handleSubmit(event) {
        event.preventDefault();
        this.setState({ isTextDisplayed: true });
    }



    render() {
        return (
            <>
                <div className='title'>
                    <h1>Notes</h1>
                    <span className="LineTitle"></span>
                </div>
                <form id="form" onSubmit={this.handleSubmit}>
                    <textarea className="textNote" id="textZone" value={this.state.value} onChange={this.handleChange}></textarea>
                    <button type="submit" className="addBtn">Ajouter</button>
                    <button type="reset" className="deleteBtn" >Supprimer</button>
                </form>

                <AddNote text={ this.state.value } isTextDisplayed={ this.state.isTextDisplayed } />
                
            </>
        )
    }
}

export default Note;

// in addnote.js

import React from 'react';
import Note from './note';

class AddNote extends React.Component {



    render() {
        return (
            <>
                <h3 className="NoteDetails">date/heure/minutes</h3>
                <span className="NoteLine"></span>
                <div className="notes">
                    <p>{ this.props.isTextDisplayed && this.props.text }</p>
                </div>

            </>
        )
    }
}

export default AddNote;

Screen of my app

CodePudding user response：

You can keep an array of notes and move the delete button to the AddNote component.

Try like below:

class AddNote extends React.Component {
  render() {
    return (
      <React.Fragment>
        <h3 className="NoteDetails">date/heure/minutes</h3>
        <span className="NoteLine"></span>
        <div className="notes">
          <p>{this.props.isTextDisplayed && this.props.text}</p>
        </div>
        <button
          type="reset"
          className="deleteBtn"
          onClick={() => this.props.handleDeleteNote(this.props.noteIndex)}
        >
          Supprimer
        </button>
      </React.Fragment>
    );
  }
}

class Note extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "", isTextDisplayed: false, notes: [] };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleDeleteNote = this.handleDeleteNote.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({ isTextDisplayed: true });
    this.setState(
      { notes: [...this.state.notes, this.state.value] },
      this.setState({ value: "" })
    );
  }

  handleDeleteNote(index) {
    this.setState({
      notes: this.state.notes.filter((_, itemIndex) => index !== itemIndex)
    });
  }

  render() {
    return (
      <React.Fragment>
        <div className="title">
          <h1>Notes</h1>
          <span className="LineTitle"></span>
        </div>
        <form id="form" onSubmit={this.handleSubmit}>
          <textarea
            className="textNote"
            id="textZone"
            value={this.state.value}
            onChange={this.handleChange}
          ></textarea>
          <button type="submit" className="addBtn">
            Ajouter
          </button>
        </form>

        {this.state.notes.map((note, noteIndex) => (
          <AddNote
            key={noteIndex}
            text={note}
            isTextDisplayed={this.state.isTextDisplayed}
            noteIndex={noteIndex}
            handleDeleteNote={this.handleDeleteNote}
          />
        ))}
      </React.Fragment>
    );
  }
}

ReactDOM.render(<Note />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>