2
\$\begingroup\$

I am new to react and I tried to implement a TODO application using react state and props. I need somebody to just review the code and suggest improvements in the code. Currently I have not added any CSS to it, I am focusing more on react practices. code sandbox link- https://codesandbox.io/s/adoring-archimedes-se4vm

App.jsx

import './App.css';
import InputForm from './InputForm';
import ShowTODO from './ShowTODO'
import Choices from './Choices';
import {useState} from 'react'

function App(props) {
  const [todoList, setTODOList] = useState([]);
  const [filterName, setFilterName] = useState("active");

  const addTODO = (event, todoInput) => {
    // if you do not do this then if form submit is clicked
    // then page will refresh and everything will go
    event.preventDefault();
    var currentTODO = {"state": "active", "data": todoInput};
    var previousTODOList = [...todoList];
    previousTODOList.push(currentTODO);
    setTODOList(previousTODOList);
  }

  const updateFilterName = (event) => {
    let newFilterName = event.target.value;
    setFilterName(newFilterName);
    console.log(todoList);
  }

  const updateTODOStatus = (index, newState) => {
    let previousTODOList = [...todoList];
    previousTODOList[index]["state"] = newState;
    setTODOList(previousTODOList);
  }

  return (
    <div className="App">
      <InputForm onSubmit={addTODO}/>
      <Choices filterName={filterName} onChange={(e) => updateFilterName(e)}/>
      <p>
        {filterName}
      </p>
      <ShowTODO filterName={filterName} todoList={todoList} updateStatus={updateTODOStatus}/>
    </div>
  );
}

export default App;

Choices.jsx

function Choices(props) {
  return (
    <div>
      <select value={props.filterName} onChange={(event)=>props.onChange(event)}>
        <option value="active"> Show active to do </option>
        <option value="completed"> Show completed to do </option>
        <option value="all"> Show all to do </option>
      </select>
    </div>
  );
}

export default Choices;

InputForm.jsx

import './App.css';
import {useState} from 'react'

function InputForm(props) {
  const [todoInput, setTODOInput] = useState("");
  const addTODO = (event)=>{
    props.onSubmit(event, todoInput);
  }
  const updateInputValue = (event) => {
    setTODOInput(event.target.value);
  }
  return (
    <div className="InputForm">
      <form onSubmit={addTODO}>
        <input
        type="text"
        name="todo-input"
        id="todo-input"
        value={todoInput}
        onChange={(event)=>updateInputValue(event)}
        />
        <button> Add To Do </button>
      </form>
    </div>
);
}

export default InputForm;

ShowTODO.jsx

function ShowTODO(props) {
  return (
      <div>
        {
          props.todoList.map((todo, index) => {
            return (
              <div key={index}>
                {todo.state === "active" && props.filterName === "active" && <span> {todo.data} Mark as complete <input type="checkbox" onClick={()=>props.updateStatus(index, "completed")}/> </span> }
                {todo.state === "completed" && props.filterName === "completed" && <span> {todo.data} Mark as active <input type="checkbox" onClick={()=>props.updateStatus(index, "active")}/> </span>}
                {props.filterName === "all" && <span> {todo.data} </span>}
              </div>
            );
          })
        }
      </div>
  );
}

export default ShowTODO;
New contributor
user749598 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
\$\endgroup\$

Your Answer

user749598 is a new contributor. Be nice, and check out our Code of Conduct.

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.