Closed
Description
Summary
https://react.dev/learn/state-a-components-memory#giving-a-component-multiple-state-variables
In this chapter, there's an example demonstrating a toggle between "Show Details" and "Hide Details."
The button is styled as an inline-block, which disrupts the layout. Adding a <br /> element fixes the issue.
Page
https://react.dev/learn/state-a-components-memory#giving-a-component-multiple-state-variables
Details
export default function Gallery() {
const [index, setIndex] = useState(0);
const [showMore, setShowMore] = useState(false);
function handleNextClick() {
setIndex(index + 1);
}
function handleMoreClick() {
setShowMore(!showMore);
}
let sculpture = sculptureList[index];
return (
<>
<button onClick={handleNextClick}>Next</button>
<h2>
<i>{sculpture.name} </i>
by {sculpture.artist}
</h2>
<h3>
({index + 1} of {sculptureList.length})
</h3>
<button onClick={handleMoreClick}>
{showMore ? "Hide" : "Show"} details
</button>
{showMore && <p>{sculpture.description}</p>}
// this br tag is added
<br />
<img src={sculpture.url} alt={sculpture.alt} />
</>
);
}