CODEWITHSUNDEEP
reactjsreact-bootstrap
karite36
karite36

Reputation: 47

What's wrong with my onSubmit/handleSubmit method on this Nav.Link?

import React, { Fragment } from "react";
import { Container, ListGroup, Card, Button, Row, Col, Nav } from "react-bootstrap";
import Footer from "../Footer";

export const Dashboard = props => {
  let selectedOption = "";
  const handleSelect = evt => {
    evt.preventDefault();
    selectedOption = evt.target.name;
    console.log(evt.target.name);
  };

  //Figure out how to get username from headers
  return (
    <div style={{ textAlign: "center" }}>
      <Container>
        <Row>
          <Col lg={4} xs={4}>
            <Card style={{ width: "18rem" }}>
              <Card.Img variant="top" src="https://www.brandeps.com/icon-download/U/User-icon-vector-01.svg" />
              <Card.Body>
                <Card.Title>[Username]</Card.Title>
                <Card.Text>[Account Info]</Card.Text>
                <Button variant="primary">Go somewhere</Button>
              </Card.Body>
            </Card>
          </Col>
          <Col lg={8} xs={8}>
            <Nav justify variant="tabs" defaultActiveKey="/home">
              <Nav.Item>
                <Nav.Link name="paymentInfo" onSelect={evt => handleSelect(evt)}>
                  Modify Payment Info
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link name="bankInfo" onSelect={evt => handleSelect(evt)}>
                  Modify Bank Info
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link name="withdrawal" onSelect={evt => handleSelect(evt)}>
                  Make A Withdrawal
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link onSelect={evt => handleSelect(evt)}>???</Nav.Link>
              </Nav.Item>
            </Nav>
            {selectedOption === "paymentInfo" && console.log("object")}
          </Col>
        </Row>
      </Container>
      <Footer />
    </div>
  );
};

So I eventually want to basically populate a nice connected menu directly beneath the nav I have set up, but I'm not seemingly able to properly implement either the onSelect event listener or handleSelect method. Right now I just want it to console.log the word "object" just to ensure it actually fires.

Any idea what I'm doing wrong?

Upvotes: 0

Views: 143

Answers (3)

wentjun
wentjun

Reputation: 42556

You simply need to modify the usage of onSelect event. The onSelect event is a prop from the Nav component, as stated on the API, and not on other components, such as Nav.Link.

<Nav justify variant="tabs" defaultActiveKey="/home" onSelect={evt => handleSelect(evt)}>
  // others
</Nav>

Upvotes: 1

Ra&#250;l C. Rivero
Ra&#250;l C. Rivero

Reputation: 297

The problem is that the links have the onClick property, not onSelect so you can try:

export const Dashboard = props => {
  let selectedOption = "";
  const handleSelect = evt => {
    evt.preventDefault();
    selectedOption = evt.target.name;
    console.log(evt.target.name);
  };

  //Figure out how to get username from headers
  return (
    <div style={{ textAlign: "center" }}>
      <Container>
        <Row>
          <Col lg={4} xs={4}>
            <Card style={{ width: "18rem" }}>
              <Card.Img variant="top" src="https://www.brandeps.com/icon-download/U/User-icon-vector-01.svg" />
              <Card.Body>
                <Card.Title>[Username]</Card.Title>
                <Card.Text>[Account Info]</Card.Text>
                <Button variant="primary">Go somewhere</Button>
              </Card.Body>
            </Card>
          </Col>
          <Col lg={8} xs={8}>
            <Nav justify variant="tabs" defaultActiveKey="/home">
              <Nav.Item>
                <Nav.Link name="paymentInfo" onClick={evt => handleSelect(evt)}>
                  Modify Payment Info
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link name="bankInfo" onClick={evt => handleSelect(evt)}>
                  Modify Bank Info
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link name="withdrawal" onClick={evt => handleSelect(evt)}>
                  Make A Withdrawal
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link onClick={evt => handleSelect(evt)}>???</Nav.Link>
              </Nav.Item>
            </Nav>
            {selectedOption === "paymentInfo" && console.log("object")}
          </Col>
        </Row>
      </Container>
      <Footer />
    </div>
  );
};

I hope it works.

Upvotes: 1

akhtarvahid
akhtarvahid

Reputation: 9779

Your code is fine. just replace onSelect to onClick

like this

         <Nav.Item>
            <Nav.Link name="paymentInfo" onClick={evt => handleSelect(evt)}>
              Modify Payment Info
            </Nav.Link>
          </Nav.Item>

Upvotes: 1

Related Questions