Todo list Reverse state to false on click onclick

user_15989850 0
Viewed 58

I am trying to reverse a state to true or false when user is clicking the cancel button.

The full project is available on sandbox via the link below. I am new to react developing and struggling with state. Can someone help, please?

To see what i mean by the above, please enter some input and click add

https://codesandbox.io/s/eloquent-feather-gc88n?file=/src/header/header.js

Thank Leo

use-state reactjs state boolean
1 Answers

Update your handleCancelClick function to this:

handleCancelClick = (e) => {
    setIsEditing((prevState) => !prevState)
    console.log('Cancel edit', isEditing)
}

Few more amends that you might need:

In skillist.js:

<EditSkillsForm
  inputs={inputs}
  isEditing={isEditing}
  setIsEditing={setISEditing}
  onCancelClick={handleCancelClick}
  onUpdateInput={handleUpdateInput}
  onCurrentInput={currentInput}
/>

In editSkillsForm.js, we get isEditing and setIsEditing props also :

const EditSkillsForm = ({
  handleUpdateInput,
  inputs,
  handleCancelClick,
  setCurrentSkill,
  isEditing,
  setIsEditing
}) => {

Full file code (just in case): editSkillsForm.js:

import React, { useState } from "react";

const EditSkillsForm = ({
  handleUpdateInput,
  inputs,
  handleCancelClick,
  setCurrentSkill,
  isEditing,
  setIsEditing
}) => {
  //const [ currentSkill, setCurrentSkill ] = useState({});
  // const [isEditing, setIsEditing] = useState(true);
  // const [ onSubmitEditing, SetOnSubmitEditing ] = useState("")

  function handleEditInputChange(e) {
    setCurrentSkill(e.target.value);
  }

  handleCancelClick = (e) => {
    setIsEditing(false);
    console.log("Cancel edit", isEditing);
  };

  return (
    <>
      {isEditing ? (
        <div>
          <h4>Edit Skill</h4>
          <input
            className="mb-2"
            size="lg"
            onChange={handleEditInputChange}
            type="text"
            name="Update skill"
            placeholder="Update skill"
            value={inputs}
          />
          <button className="btn btn-primary mx-2" onClick={handleUpdateInput}>
            Update
          </button>
          <button onClick={() => handleCancelClick()}>Cancel</button>
        </div>
      ) : null}
      {/* <div>
      <h4>Edit Skill</h4>
      <input
      className="mb-2"
      size="lg"
      onChange={handleEditInputChange}
      type="text"
      name="Update skill"
      placeholder="Update skill"
      value={inputs}
       />
    </div> */}
      {/* <input
      className="mb-2"
      size="lg"
      onChange={handleEditInputChange}
      type="text"
      name="Update skill"
      placeholder="Update skill"
      value={inputs}
       /> */}
      {/* <button className="btn btn-primary mx-2">Update</button> */}
      {/* <button onClick={() => handleCancelClick()}>Cancel</button> */}
    </>
  );
};

export default EditSkillsForm;
user_73437310
Related