1

How to write dynamic checkboxes using react redux. Actually, I want to show up in the last Row when we click all checkboxes it shows up in the last row hyperlink.

When we select all checkboxes and show up the last link row part of the below code. If we uncheck the last row will hide.

Here I am using react-bootstrap. Please help with this

 <div>
    <Row>
      <Col>
        <h1 >
          test
        </h1>
      </Col>
    </Row>
    {orders.map((order, index) => (
    <Row className="mt-4" key={index}>
      <Col>
        <Form.Check
          type="checkbox"
          label={order.name}
            name={order.name}
            onChange ={handleChange}
        />
      </Col>
      </Row>
    ))}

    <Row className="mt-4">
    {isAllChecked && (

      <Col>
        <h2l>
          <strong>test?</strong>
        </h2>
        </Col>
    )}
    </Row>
    <Row>
    {isAllChecked && (
      <Col>
        <Link to="/test3" style={{ color: '#009540', fontSize: '20px' }}>
          click here
          <FontAwesomeIcon
            icon={faArrowRight}
            style={{ color: '#009540', marginBottom: '-3px' }}
          />{' '}
        </Link>
        </Col>
    )}
      </Row>

  </div>
7
  • Where does this code render any checkboxes? Where does it use redux? Can you clarify what you want or what the issue is?
    – Drew Reese
    Aug 3, 2021 at 6:14
  • If I select all checkboxes I want to display last (Fortsatt uten nett?) div otherwise hide it
    – user9490998
    Aug 3, 2021 at 7:28
  • Oh, I see now. And what have you tried already to accomplish this?
    – Drew Reese
    Aug 3, 2021 at 7:32
  • Please check updated code
    – user9490998
    Aug 3, 2021 at 7:33
  • I saw that, but I don't see where you try to check if all checkboxes are selected or conditionally hide the div.
    – Drew Reese
    Aug 3, 2021 at 7:37

1 Answer 1

0

You could iterate the orders array and check that every element has a truthy isChecked property.

Array.prototype.every

The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

const isAllChecked = orders.every(({ isChecked }) => isChecked);

Then conditionally render the "Fortsatt uten nett?" div.

Conditional Rendering

{
  isAllChecked && (
    <HomenetText headingSmall>
      <strong>Fortsatt uten nett?</strong>
    </HomenetText>
  )
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy