onClick event is sending me to the correct method but from inside that method, it is not calling the-CodePudding

I have below EditAddressPage component which when I click on Manual Entry button, it should send me to the getAddressField method and from there go to <AddressFields /> component. I see when onCLick happens. it is sending me to the getAddressField method but from there it is lost. I was wondering if someone can give me a second though what is missing there because anything I've tried didn't work so far.

import AddressFields from 'components/widget/AddressFields';
import "./EditAddressPage.less";

const EditAddressPage = (props) => {

  const getManualAddressEntry = () => {
    return (
      <AddressFields
        {...props}
      />
    )
  }

  return (
    <div
      <div className="body-container">
          <span id="manually-enter-section">
            {gt.gettext('Can’t find your address? ${0}',
            <Button
              color="primary"
              iconSide="left"
              iconSrc=""
              onClick={() => getManualAddressEntry()}
              size="medium"
              variant="flat"
              id="manual-entry-button"
            >
              Enter it manually
            </Button>
            )}
          </span>


    </div>
  )
}

export default EditAddressPage;

export default class AddressFields extends PureRenderComponent {
    constructor() {
        super();
        this.x = true;
        this.y = undefined;
        this.z = undefined;
    }

    componentWillMount() {
        // something
    }

    componentDidMount() {
        // something
    }

    componentWillUnmount() {
        // something
    }

    render() {}
  }

CodePudding user response：

Your getManualAddressEntry() function does not render the component, it just returns it as a value.

To render it, you can use conditional rendering like so:

<Button
  color="primary"
  iconSide="left"
  iconSrc=""
  onClick={() => getManualAddressEntry()}
  size="medium"
  variant="flat"
  id="manual-entry-button"
>
  Enter it manually
</Button>
{buttonClicked && <AddressFields/>}

buttonClicked (or whatever name you prefer) should be a state that is initially set to false, and getManualAddressEntry() should toggle it between false and true

const [manualAddressOpen, setManualAddressOpen] = useState(false)

const getManualAddressEntry = () => {
  setManualAddressOpen(!manualAddressOpen)
}

Example of conditional rendering: