如何显示列表的单个隐藏元素并隐藏 rest

Question

I have a column list of elements, and each of them has hidden div, I want to show hidden element on click, but when I'm clicking another div, I want to hide current and show the one I clicked last, how can I do it correctly?

Answer 1

You could have two specific classes, one that hides element and one that shows element. when clicking on the element you can use jQuery or JavaScript to toggle the class that shows element for the hidden div of that specific element and hide everything for any other div.

Answer 2

The component you're rendering could take in an active prop and only render the second div if this prop is true.

With this, you could then keep track of which element is selected in the parent.

I threw together a working example with very simple content

import React, { useState } from 'react';

const ListItem = ({id, isActive, handleClick}) => {
    return (
        <div id={id} onClick={handleClick}>
        Here is the element
            {!!isActive && <div>I am the selected element</div>}
        </div>
    );
};

export const List = () => {
    const [selectedItem, setSelectedItem] = useState();
    const items = ['one', 'two', 'three'];
    
    const handleClick = (event) => {
        setSelectedItem(event.target.id);
    }

    return (
        <div>
            {items.map(item => (
                <ListItem id={item} isActive={item===selectedItem} handleClick={handleClick}/>
            ))}
        </div>
    )
}