I want the button to be invisible when there are less than length (5) buttons visible.
It is outputting 5 each through visible state.
on the detail page But I would like to display the buttons invisible if there are fewer than 5 outputs.
But in my code now, when there are less than 5 buttons, the button is created and the button disappears only when the button is clicked.
When rendering, I want to make the buttons invisible when there are less than 5, but how should I write the code?
I want to hide the button when there are less than 5 visible
It works properly. However, when there are less than 5, the button disappears when the button is clicked.
However, if there are less than 5, the button disappears when the button is clicked. But what if, when rendering the page, there are less than 5 visible? I want to make the button null on rendering so it is invisible even if it's not clicked.
For reference, 5 visible is made visible in
{All.displayText} has set useState(5)' so that 5 visible are visible.
And if visible == 5 , all lengths are printed.
ProductDetail.allergies.length
When this value is less than 5, I think you can set it as visible setState, but I don't know how to do it.
const [visible, setVisible] = useState(5);
const [expanded, setexpanded ] = useState(false);
const showMore = () => {
if (visible === 5) {
setVisible(ProductDetail.allergies.length);
setexpanded(true);
} else {
setVisible(5);
setexpanded(false);
}
}
return (
{ProductDetail && ProductDetail.allergies?.length
? ProductDetail.allergies.slice(0, visible).map(All => (
<li key={All.id}>
{All.displayText}
</li>
<ButtonBox>
{visible >= 4
? <button type="button" onClick={showMore}>
{expanded
? (<div><span>close</span><img src={Vector190}/></div>)
: (<div><span>more</span><img src={Vector189}/></div>)
}
</button>
: null
}
</ButtonBox>
)
I solved it.
<ButtonBox>
{
visible < ProductDetail.allergies?.length
? <button type="button" onClick={showMore}>
{expanded
? (<div><span>close</span><img src={Vector190}/></div>)
: (<div><span>more</span><img src={Vector189}/></div>)
}
</button>
: null
}
</ButtonBox>
What you need to do is this:
return (
{ProductDetail && ProductDetail.allergies?.length
? ProductDetail.allergies.slice(0, visible).map(All => (
<li key={All.id}>
{All.displayText}
</li>
<ButtonBox>
{visible < 5 // <- change the condition here
? <button type="button" onClick={showMore}>
{expanded
? (<div><span>close</span><img src={Vector190}/></div>)
: (<div><span>more</span><img src={Vector189}/></div>)
}
</button>
: null
}
</ButtonBox>
)