0
267
ViewsonClick event is sending me to the correct method but from inside that method, it is not calling the inner component and it is lost
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() {}
}
1 answers
Answer question0
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:
