Tips for toggling the visibility of an element when a button is clicked in React

Question

Tips for toggling the visibility of an element when a button is clicked in React

In my todo list, I need to display the details of each item when clicked on a button. There are two buttons available: "View Details" and "Hide Details". Below is the code snippet:


        class Todos extends React.Component{
            constructor(props){
                super(props);
                this.state={
                  shown:null,
                  todos: []
                }
            }
        
            showDetails = (todo) => {
                this.setState({
                    shown: todo.id
                });
            }
        
            render(){
                const { shown, todos } = this.state;
                
                return(
                    <div>
                        <ul>
                            {todos.map((todo)=>(
                                <li key={todo.id}>
                                    <span >{todo.title}</span>
                                    
                                     <button onClick={()=>this.showDetails(todo)}>View Details</button>
                                     
                                    {shown === todo.id && (<div>
                                        Description: {todo.description}<br/>
                                        Due Date: {todo.status} <br/>
                                    </div>)  }
                                </li>
                            ))}
                        </ul>
                    </div>
                )
            }
        }

The current issue is that clicking on any button shows the details for all todo items. How can I modify the code in order to only display details for the selected todo item?

javascript html css reactjs

Answer 1

Answer №1

To enhance the structure and organization of your code, it is suggested to separate each Todo into its own component rather than solely using JSX mapping 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 prefer not to utilize Hooks and instead want to use the class-based approach

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 into your current component by following this example

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

Answer 2

To enhance the structure and organization of your code, it is suggested to separate each Todo into its own component rather than solely using JSX mapping 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 prefer not to utilize Hooks and instead want to use the class-based approach

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 into your current component by following this example

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

Answer 3

Answer №2

 class Todos extends React.Component{
constructor(props){
    super(props);
    this.state={
      shown:false,
      selectedId:'',
      todos: []
    }
}
showDetails = (isVisible, id) => {
  this.setState({
   shown: isVisible,
   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 code includes a method where the specific Todo to be viewed or hidden is controlled by passing its unique id into the function.

Answer 4

 class Todos extends React.Component{
constructor(props){
    super(props);
    this.state={
      shown:false,
      selectedId:'',
      todos: []
    }
}
showDetails = (isVisible, id) => {
  this.setState({
   shown: isVisible,
   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 code includes a method where the specific Todo to be viewed or hidden is controlled by passing its unique id into the function.

Tips for toggling the visibility of an element when a button is clicked in React

Answer №1

Answer №2

Similar questions

What could be the reason for the lack of styling on the select element when using PaperProps in the MenuProps of my Select component?

Ways to incorporate a React component to display Google Maps InfoWindows

Creating a unique navigation route in React

Posting data in ASP.NET Core from the frontend to the backend (specifically with React) involves sending information

An issue of "SignatureDoesNotMatch" arises while trying to send an email using Node AWS SDK for the Simple Email Service

Trouble with z-index functionality in jQuery datatable

What is the best way to access dropdown sub-menu options from a complex multi-level navigation bar

Tips for configuring page-specific variables in Adobe DTM

What is the process for dynamically updating a variable's state within a render function?

Using jQuery to iterate over a multi-dimensional array and showing the child elements for each parent array

Rendering a component six times in React

"Owlcarousel Slider: A beautiful way to showcase

Is it possible to execute a program on MacOS through a local HTML website?

Is there a way to exclude a specific value from a nested zod scheme?

Having trouble retrieving react environment variables from process.env?

Display the image in a pop-up window before executing a jQuery script

Design that adapts to various screen sizes and devices

Is there a way for me to retrieve props that have been passed through the Vue router within a Vue component?

Securing a JWT token post login

Is there a way to use a less mixin or selector to adjust the position depending on the sibling