CODEWITHSUNDEEP
reactjsbootstrap-4react-bootstrap
user2772197
user2772197

Reputation: 200

How to check checkbox in nav link?

I need a checkbox in nav link and I want them to work independently of each other but checkbox not working. I using form check in bootstrap and respectively i thought bootstrap's form.check not working in nav link and I tried replacing form.check to simple input with type is checkbox but this method also not working. maybe the reason lies in nav link, how to solution this problem?

example: https://codesandbox.io/s/clever-wave-tyswy?file=/src/App.js

Upvotes: 1

Views: 526

Answers (2)

user2772197
user2772197

Reputation: 200

I found solution. If you want add checkbox to nav link in react bootstrap you need set method to "as" parametr

<Nav>
  <Nav.Item>
    <Nav.Link
      eventKey={"checkbox1"}
      as={(props) => (
        <a {...props} href={"#"}>
          <Form.Check type="checkbox" id="checkbox1" /> {"nav link1"}
        </a>
      )}
    />
  </Nav.Item>
  <Nav.Item>
    <Nav.Link
      eventKey={"checkbox2"}
      as={(props) => (
        <a {...props} href={"#"}>
          <Form.Check type="checkbox" id="checkbox2" /> {"nav link1"}
        </a>
      )}
    />
  </Nav.Item>
  <Nav.Item>
    <Nav.Link
      eventKey={"checkbox3"}
      as={(props) => (
        <a {...props} href={"#"}>
          <Form.Check type="checkbox" id="checkbox3" /> {"nav link1"}
        </a>
      )}
    />
  </Nav.Item>
</Nav>

https://codesandbox.io/s/cocky-field-8jns1?file=/src/App.js:143-957

Upvotes: 0

venkatesh pogartha
venkatesh pogartha

Reputation: 281

Try this

import React, { useState } from "react";
import { Nav, Form } from "react-bootstrap";
import "./styles.css";

export default function App() {
  const [checkboxes, setCheckboxes] = useState({});

  const hadleClick = (key) => {
    setCheckboxes({
      ...checkboxes,
      [key]: !checkboxes[key]
    });
  };

  return (
    <Nav>
      <Nav.Item onClick={() => hadleClick("one")}>
        <Nav.Link>
          <Form.Check
            onClick={() => hadleClick("one")}
            type="checkbox"
            checked={checkboxes.one}
            id="checkbox1"
            name="checkbox1"
            label="OK 1"
          />
        </Nav.Link>
      </Nav.Item>
      <Nav.Item onClick={() => hadleClick("two")}>
        <Nav.Link>
          <Form.Check
            checked={checkboxes.two}
            type="checkbox"
            id="checkbox2"
            name="checkbox2"
            label="OK 2"
          />
        </Nav.Link>
      </Nav.Item>
      <Nav.Item onClick={() => hadleClick("third")}>
        <Nav.Link>
          <Form.Check
            checked={checkboxes.third}
            type="checkbox"
            id="checkbox3"
            name="checkbox2"
            label="OK 3"
          />
        </Nav.Link>
      </Nav.Item>
    </Nav>
  );
}

Here is the codesandbox link https://codesandbox.io/s/festive-blackwell-vh3dt?file=/src/App.js

Upvotes: 2

Related Questions