JSFiddle - React, Tailwind, and code Playground

JavaScript

/* simple todo list */


import React, { Component } from 'react';
import './App.css';
 // /<input type="checkbox" ref = {state.listTasks}/>
  function todoElems(data, parentState){
	   
	return <div>{
		
		data.map((n, i)=>{
          return (<div className="listElem" key={i}>
       		  {n}
				<input type="checkbox"/>
			</div>
    )
    })}</div>
	
}
const initialState = ['Learn React', 'Learn Redux']

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: todoElems(initialState)
    }
    }
      handleAdd(){
		  initialState.push(this.inputAdd.value)
        this.setState((prevState) => ({
              data: todoElems(initialState)
            }))

      }
      componentDidUpdate(){

          this.inputAdd.value ='';
      }
     handleRemove(){
		this.setState( prevState => {
			
		})
     }

    render() {
    return (

    <div className="todoMain">
      <span className="todo">TODO</span>

      <input className='val' placeholder="Add a Task..." type="text" ref={(input) => { this.inputAdd = input }} />
			<input  type="button" value='Add' onClick={this.handleAdd.bind(this)} />

			<input  type="button" value='Clear' onClick={this.handleRemove.bind(this)} />
        {this.state.data}
     </div>)
    } }
   



export default App;