I'm using ReactJS and Typescript for my frontend application but have run into an issue passing a prop from one component to another component. I'm very new to ReactJS and I'm not sure if I'm doing this correctly. Here is my simple Search component:

const Search: NextPage = () => {

    const [visible, setVisible] = useState(false)

    let id = ""
    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>)=> {
      console.log(id)
      id = e.target.value;
    }

    return (
        <>
          <Container>
            <Card>
              <Form>
                <Row>
                <Col>
                  <Form.Group className="mb-3" controlId="formBasicEmail">
                  <Form.Control onChange={handleOnChange} placeholder="Enter Number" />
                  </Form.Group>
                </Col>
                <Col>
                  <Button variant="primary" onClick = {() => {setVisible(true)}}>
                    <i className="fa fa-search" aria-hidden="true"></i>
                  </Button>
                </Col>
                </Row>
              </Form>
            </Card>
          </Container>

          {visible && <TransactionContent id={id} />}
        </>
    );
};

The idea is that given a number passed by the user, when the user clicks on Submit, that number is passed into another component via a prop (id) and then based on the id passed in, the component will either render more information about that number, or let the user know that number was not found in the mock json data I have.

There are 2 problems I'm currently facing:

1. Although the id changes via an onChange event, the id passed into the prop is always nothing.
2. Once onClick event triggers, the button is basically useless.

I would first like to fix the issue of the id prop not being passed in correctly via the prop. Not sure why it isn't working, since the console.log in handleOnChange function seems to update according to user. After that, I would like for the user to continue to input a number even if the first number doesnt work or if they found a number, they can search for other numbers and still render the TransactionContent but with different data.

CodePudding user response：

Add id to the state will solve your problem

  const [visible, setVisible] = useState(false);
  const [id, setId] = useState("");

  const handleOnChange = (e) => {
    setId(e.target.value);
  };

  console.log("id", id);

Here the codesandbox for this: https://codesandbox.io/s/nostalgic-frost-7ktsuy?file=/src/App.js

CodePudding user response：

Add id to the state. And onClick function exchange.

const Search: NextPage = () => {

const [visible, setVisible] = useState(false);
const [id, setId] = useState("");
const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>)=> {
  setId(e.target.value);
}

return (
    <>
      <Container>
        <Card>
          <Form>
            <Row>
            <Col>
              <Form.Group className="mb-3" controlId="formBasicEmail">
              <Form.Control onChange={handleOnChange} placeholder="Enter Number" />
              </Form.Group>
            </Col>
            <Col>
              <Button variant="primary" onClick = {() => setVisible(true)}>
                <i className="fa fa-search" aria-hidden="true"></i>
              </Button>
            </Col>
            </Row>
          </Form>
        </Card>
      </Container>

      {visible && <TransactionContent id={id} />}
    </>
);

};