Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why isn't my active condition statement working?

I am having some trouble while creating my pagination page using react-bootstrap. I am trying to apply condition for active but it is not working.

<Pagination.Item 
                // active={x+1===page}
                active={false}
                >
                    {x+1} 
</Pagination.Item>

All pagination status is showing active on UI.

How can I apply condition on active.

Tags:

2

Answers


  1. 0

    Can you provide more details of the code

    Login or Signup to reply.
  2. 0

    Looking at the bit of code you have provided, I have to surmise that
    your component looks something like this..

    [0, 1, 2, 3].map(x => (<Pagination.Item active={x+1===page}>
                        {x+1} 
                       </Pagination.Item>)
)

    If that is the case, you are missing a key property on the element. Something along the lines of this..

    [0, 1, 2, 3].map(x => (<Pagination.Item active={x+1===page} key={x}>
                        {x+1} 
                       </Pagination.Item>)
)

    The key needs to be a completely unique value, and is required so that react can keep track of the element in an array and render/update them as they change. Lack of a key prop can lead to bugs when the component state or properties update.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search