How to show and hide an element on button click in React?

Question

I have a list of todo items where I have to show the details of todo item on click of a button. I have two buttons "View Details" and "Hide Details" for the same.Below is code:

class Todos extends React.Component{
    constructor(props){
        super(props);
        this.state={
          shown:false,
          todos: []
        }
    }
showDetails = (bool) => {
      this.setState({
       shown:bool
      });
    }

render(){
     const { shown, todos } = this.state;
        return(
        <div>
            <ul>
              {todos.map((todo,i)=>(
                <li key={todo.id}>
                  <span >{todo.title}</span>
                 <button onClick={this.showDetails.bind(this, true)}>View Details</button>
                 <button onClick={this.showDetails.bind(this, false)}>Hide Details</button>

                  {shown && (<div>
                    Description:{todo.description}<br/>
                    Due Date: {todo.status} <br/>
                  </div>)  }               
                </li>
              
              ))}
            </ul>
}
           

The issue here is that I will be having multiple view and hide buttons for each todo item and whenever I click on that button, details of all the todo items gets displayed. How can I click a todo item and able to see only that todo item's detailed view?

Answer 1

The easiest and most recommended way would be to break down each Todo into a seperate component rather than just mapping JSX for each.

const Todo = ({ todo }) => {
  const [visible, setVisbile] = useState(true)

  const toggleDetails = () => {
    setVisbile(!visible)
  }

  return (
    <li key={todo.id}>
      <span >{todo.title}</span>
      <button onClick={toggleDetails}>{ visible ? 'Hide Details' : 'View Details' }</button>
      {visible && (<div>
        Description:{todo.description}<br/>
        Due Date: {todo.status} <br/>
      </div>)  }               
    </li>
  )
}
export default Todo;

if you don't want to use Hooks and wish to use the class based version

class Todo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: true
    }
  }

  toggleDetails = () => {
    const newToggleState = !this.state.visible
    this.setState({ visible: newToggleState })
  }

  render () {
    const { todo } = this.props
    const { visible } = this.state
    return (
      <li key={todo.id}>
        <span >{todo.title}</span>
        <button onClick={this.toggleDetails}>{ visible ? 'Hide Details' : 'View Details' }</button>
        {visible && (<div>
          Description:{todo.description}<br/>
          Due Date: {todo.status} <br/>
        </div>)  }               
      </li>
    )
  }
}

you can import this in your current component like this

render(){
   const { shown, todos } = this.state;
      return(
      <div>
          <ul>
            {todos.map((todo,i)=>(
              <Todo key={todo.id} todo={todo}/>
            ))}
          </ul>
      </div>
      )
  }
}
  

Answer 2

 class Todos extends React.Component{
constructor(props){
    super(props);
    this.state={
      shown:false,
      selectedId:'',
      todos: []
    }
}
showDetails = (bool,id) => {
  this.setState({
   shown:bool,
   selectedId:id
  });
}

render(){
 const { shown, todos,selectedId } = this.state;
    return(
    <div>
        <ul>
          {todos.map((todo,i)=>(
            <li key={todo.id}>
              <span >{todo.title}</span>
             <button onClick={this.showDetails.bind(this, true,todo.id)}>View Details</button>
             <button onClick={this.showDetails.bind(this, false,todo.id)}>Hide Details</button>

              {shown &&selectedId===todo.id (<div>
                Description:{todo.description}<br/>
                Due Date: {todo.status} <br/>
              </div>)  }               
            </li>
          
          ))}
        </ul>

}

The method mentioned in the code has the todo id passed into the function . So that the particcular Todo to be viewed or hidden shall be controlled