Reputation: 539
I have two component, i give my parents component as props of my child component and i want to call a parents function in my child component.
Parents component:
import React, {Component} from 'react';
import "../../css/App.css"
import "../../css/Admin.css"
import { connect } from 'react-redux'
import {withRouter} from 'react-router-dom'
import Switch from '@material-ui/core/Switch';
import AuthentificationService from "../../api/AuthentificationService"
import SimplePopover from "./AddUser"
import Users from "./Users"
import Cookies from 'universal-cookie';
import ModalAdd from "../Modal/ModalAdd";
const cookies = new Cookies();
class Admin extends Component {
constructor() {
super();
this.state = {
response: [{admin: false, createdAt: "", email: "", form_filled: false, id: "", updateAt: "", username: "", verified: false}],
addUserWorks: false
};
this.changeRoute = this.changeRoute.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.setCookie = this.setCookie.bind(this);
this.setDefaultUserWorks = this.setDefaultUserWorks.bind(this);
this.setUserWorks = this.setUserWorks.bind(this);
}
setDefaultUserWorks(e) {
console.log("setDefaultUserWorks")
this.setState({
addUserWorks: false
});
}
setUserWorks(e) {
console.log("setUserWorks")
}
setCookie(e) {
cookies.set('access_token', this.props.access_token);
console.log(cookies.get('access_token'));
}
/// Change route
changeRoute(e) {
this.props.history.push(e)
}
handleChange(e) {
};
/// Submit the forms
async handleSubmit() {
try {
await AuthentificationService.getAllUsers({
}) .then((data) => {
console.log(data);
this.setState({
response: data
});
})
} catch (error) {
alert("NO")
}
}
render() {
this.setCookie();
var i = 0;
const nameList = this.state.response.map(name => {
return (
<ul>
<li className="test">{this.state.response[i].email} </li>
<li className="test" >
<Switch
checked={this.state.response[i].admin}
value="checkedVerified"
inputProps={{ 'aria-label': 'secondary checkbox' }}
/>
</li>
<li className="test" >
<Switch
checked={this.state.response[i].verified}
value="checkedVerified"
inputProps={{ 'aria-label': 'secondary checkbox' }}
/>
</li>
<li className="test" >
<Switch
checked={this.state.response[i++].form_filled}
value="checkedVerified"
inputProps={{ 'aria-label': 'secondary checkbox' }}
/>
</li>
</ul>
)
})
return (
<div>
<div>
{this.state.addUserWorks === false ? "" : <ModalAdd parentMethod={this.setDefaultUserWorks} title="Ajout d'un utilisatuer" message="Vous alvez ajouté un utilisateur"/>}
</div>
<button className="button" onClick={() => {
this.handleSubmit();
}}>
Get/refresh the users list
</button>
<Users response={this.state.response}/>
<SimplePopover response={this}/>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
access_token: state.access_token,
refresh_token: state.refresh_token,
user_id: state.user_id,
username: state.username,
email: state.email,
admin: state.admin,
}
}
export default withRouter(connect(mapStateToProps)(Admin))
my child component is SimplePopover. So i give my component as props. My child component receive the class as props so why can't i call a function like this.props.nameOfFunction();
EDIT: I have this error: props.setUserWorks is not a function
Upvotes: 0
Views: 86
Reputation: 356
By passing this means we are passing whole parent component methods to child component i.e. all methods written/variables are passed to child component.
<SimplePopover response={this}/>
So using above code we can call parent method as props.response.changeRoute(event)
There is another way of doing this
<SimplePopover {...this}/>
With above code you can call parent methods as props.changeRoute(event)
Upvotes: 0
Reputation: 3613
Currently you are not passing any function prop to <SimplePopover />
:
<SimplePopover response={this}/>
Let's say want to pass changeRoute
:
/// Change route
changeRoute(e) {
this.props.history.push(e)
}
modify SimplePopover like this:
<SimplePopover response={this} changeRoute={this.changeRoute}/>
Then bind it in the component itself and use it by accessing the prop:
<button onClick={(event)=>{props.changeRoute(event)}}
for example.
Upvotes: 1