0
261
VisualizaçõesonClick setState is not a function
First of all, I've had a look at other answers and that didn't help.
I have a modal that is passed in a onClose function prop. When the cancel button is clicked it should trigger the onClose function which basically sets the showModal state to false. However, upon clicking the button I get an error that onClose is not a function.
I have checked the type of onClose prop and its coming back as an object. I don't know why.
This is how I am calling the Modal from the parent.
<Modal
onClose={() => this.setState((prevState) => ({
showModal: {
...prevState.showModal,
confirmation: false,
},
}))}
/>
and this is what the modal looks like.
const Modal = (onClose) => {
return (
<div className="Background" >
<div className="Container">
<div className="Title">Title of the modal</div>
<div className="Body">Body of the modal</div>
<div className="Footer">
<button type="button" onClick={() => onClose()}>Cancel</button>
</div>
</div>
</div>
);
};
This is the error from console.
·
Juan Pablo Isaza
2 Respostas
Responde à pergunta0
change this line
const Modal = (onClose) => {
to
const Modal = ({onClose}) => {
·
Juan Pablo Isaza
Relatório
0
//be sure this is being used in a class component! (not a functional)
export YourClassComponent extends React.ClassComponent {
constructor(props) {
super(props);
this.onCloseModal = this.onCloseModal.bind(this);
}
onCloseModal = () => {
this.setState((prevState) => ({
showModal: {
...prevState.showModal,
confirmation: false,
}}))
};
render() {
<Modal onClose={this.onCloseModal} />
};
};
// In you Modal.jsx, see the prop is setted directly no need to create a new ref to call it
const Modal = ({ onClose }) => {
return (
<div className="Background" >
<div className="Container">
<div className="Title">Title of the modal</div>
<div className="Body">Body of the modal</div>
<div className="Footer">
<button type="button" onClick={onClose}>Cancel</button>
</div>
</div>
</div>
);
};
·
Juan Pablo Isaza
Relatório
Responde à pergunta