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

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>
)

CodePudding user response：

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>

CodePudding user response：

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>
)