React Udemy #11: Accordion

Conditional Rendering

&& Gives back the first falsey value or the last truthy value

"h" && "a" => "a"
false && 'there' => false

React doen't print booleans, nulls, undefined

40 => 40
true => null
null => null

Demo

export default function Accordion({ items }) {
  const [expandedIndex, setExpandedIndex] = useState(-1);

  const handleClick = (nextIndex) => {
    setExpandedIndex((currentExpandedIndex) => {
      if (currentExpandedIndex === nextIndex) {
        return -1;
      } else {
        return nextIndex;
      }
    });
  };

  const renderedItems = items.map((item, index) => {
    const isExpanded = index === expandedIndex;
    
    return (
      <div key={item.id}>
        <div onClick={() => handleClick(index)}>
          {item.label}
        </div>
        {isExpanded && <div>{item.content}</div>}
      </div>
    );
  });
  
  return <div>{renderedItems}</div>;
}