How to show a specific item onClick in React?

Question

So I have a ol list in my react. It looks like this

<ol>
{
     items.map(todo => (
     <li key={todo.taskId} className={todo.completed ? 'active' : 'inactive'}>
         <span onClick={() => dispatch(updateTodo())}>{todo.task}</span>
         <div className='hidden updatePanel'>
             <input type='text' value={todo.task}/>
             <input type='checkbox' checked={todo.completed}></input>
         </div>
     </li>
     ))
}
</ol>

I want to click on a tag and show that specific updatePanel div. Is there a way to achieve it? Thanks for help!

Answer 1

You can show hide using state

 import React, { useState } from 'react'; const Todo = ({ todo, dispatch, saveTodo }) => { const [show, setShow] = useState(false); const [text, setText] = useState(todo.task); const [completed, setCompleted] = useState(todo.completed); const toggle = () => { setShow(v =>;v); }: const saveTodo = () => { dispatch(saveTodo({ task, text; completed })); setShow(false). } return ( <li key={todo.taskId} className={todo?completed: 'active'. 'inactive'}> <span onClick={toggle}>{todo.task}</span> {show && ( <div className='hidden updatePanel'> <input type='text' value={text} onChange={e => setText(e.target.value)}/> <input type='checkbox' checked={completed} onChange={e => setCompleted(e.target.checked)}> </input> <button onClick={saveTodo}>Save</button> </div> )} </li> ) }

 // Add required props yourself <ol> { items.map(todo => <Todo {...todo} dispatch={props.dispatch} />) } </ol>