Onclick Event Not Firing In React Redux Todolist Application

The onClick event is not firing at all.I am able to add todos and toggle todos but when i click on Completed todos or NotCompleted todos nothing happens.Here is the complete code f

Solution 1:

Nothing happens because, onclick on List elements returns a DOM but nowhere you are displaying it.

You should do it like

classTodoListextendsComponent {
        state = {
            displayTodos: []
         }
        render() {

        console.log(this.props.todos)
        return  (
          <divclassName='todo'><formid="frm1">
                Add To Do: <inputtype="text"name="fname"id="todo" /><br></br><inputtype="button"onClick={()=> this.props.actions.addTodo(document.getElementById("todo").value)} value="Submit" />
          </form><divclassName="visible"><ulclassName=" visibility"><lionClick={ () => {
             var todos = []
             todos = this.props.todos.map(todo => {
               return (<p> {todo.text} </p>)
             })
             this.setState({displayTodos: todos})
           }}>

              AllToDos


          </li><lionClick={() => {
             var todos = [];
              this.props.todos.filter(todo => {
               if(todo.completed===true) {
                 todos.push(<p> {todo.text} </p>)
               }
              })
              this.setState({displayTodos: todos})
              }}>

              CompletedToDos

           </li><lionClick={() => {
             var todos = []
             this.props.todos.filter(todo => {
               if(todo.completed===false) {
                 todos.push(<p> {todo.text} </p>)
               }
             })
             this.setState({displayTodos: todos})
              }}>

              NotCompletedToDos

           </li></ul><div>{this.state.displayTodos}</div></div><ulclassName='todo__list'>
             {this.props.todos.map(t => (
               <likey={t.id}className='todo__item'onClick={() => this.props.actions.toggleTodo(t.id)}>
                 <Todotodo={t} /></li>
             ))}
           </ul></div>
        )
      }
    }

Also I would personally call a function onClick rather than do everyting inline to increase code readability

Solution 2:

sorry, But I don't know what's the target of click function, it don't change the Component state or props, so this component will not render.

<li onClick={() => {
     return (<div> {this.props.todos.filter(todo => {
       if(todo.completed===true) {
         return (<p> {todo.text} </p>)
       }

     })}</div>)
      }}>

      CompletedToDos

   </li>

   <li onClick={() => {
     return ( <div> {this.props.todos.filter(todo => {
       if(todo.completed===false) {
         return (<p> {todo.text} </p>)
       }
     })}</div>)
      }}>

      NotCompletedToDos

   </li>