Change parent component state from child component - javascript

I know that the question with this title has already been asked few times before but the problem is that I couldn't get an appropriate answer. So as I am new to reactJS and trying to create login logout form.
What I want to do is to pass or change a state of parent component from a child component through an event handler(When a user clicks on logout button). Below are the two Components:
First One:
class Home extends React.Component {
constructor(props){
super(props);
this.state = {login : false};
}
login(){
// this method updates the login.state : true
}
render() {
return (
<div>
{this.state.login ? (<ChatBox userNick="fad" />) : (<LoginScreen onSubmit={this.login} />) }
</div>
);
}
}
And Second:
class ChatBox extends React.Component{
logout(){
// Expecting or trying to update parent.state.login : false
// via this method as well
}
render() {
return (
<div className="chat-box">
<button onClick={this.logout} > Logout </button>
<h3>Hi, {this.props.userNick} </h3>
</div>
);
}
}
I have simplified these component to come on point.
What's going here?
Home Component is the main parent component. Initially the state.login is false and in this situation LoginScreen Components shows up. Now, when user login through LoginScreen Component state.login updates to true, it's time to show for ChatBox Component.
Now you can see that ChatBox Component contains a button which calls a method logout to logout user. What I want is to update once again the state.login to false in Home Component When user click on the Logout Button.
I don't know how to do it, It will be appreciate if you help me.
Thanks in advance.

Do it in the same way as you are doing for Login, pass a function as a prop and call it on logout, see updates below.
const LoginScreen = () => (<div>Login Screen</div>);
class Home extends React.Component {
constructor(props){
super(props);
this.state = {login : true};
this.logout = this.logout.bind(this);
}
login(){
// this method updates the login.state : true
}
logout() {
// this method updates the login.state : false
this.setState({ login: false });
}
render() {
return (
<div>
{this.state.login ? (<ChatBox userNick="fad" onLogout={this.logout} />) : (<LoginScreen onSubmit={this.login} />) }
</div>
);
}
}
class ChatBox extends React.Component{
constructor(props) {
super(props)
// This makes sure `this` keeps pointing on this instance when logout is called from the outside.
this.logout = this.logout.bind(this);
}
logout(){
// Call the onLogout property.
this.props.onLogout();
}
render() {
return (
<div className="chat-box">
<button onClick={this.logout} > Logout </button>
<h3>Hi, {this.props.userNick} </h3>
</div>
);
}
}
ReactDOM.render(<Home />, document.querySelector('#main'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="main"></div>

You can pass an event from the Parent component to the Child component that handles the change of the state, like so:
class App extends React.Component {
constructor() {
super();
this.state = { isLoggedIn: false };
}
_handleLogin() {
this.setState({ isLoggedIn: true });
}
_handleLogout() {
this.setState({ isLoggedIn: false });
}
render() {
const { isLoggedIn } = this.state;
return (
<div>
{
isLoggedIn ?
<ChatBox logoutEvent={this._handleLogout.bind(this)} />
:
<Login loginEvent={this._handleLogin.bind(this)} />
}
</div>
);
}
}
const Login = ({ loginEvent }) => (
<button type="button" onClick={loginEvent}>Login</button>
);
const ChatBox = ({ logoutEvent }) => (
<div>
<h1>This is the Chat Box!</h1>
<button type="button" onClick={logoutEvent}>Logout</button>
</div>
);
ReactDOM.render(
<App />,
document.getElementById('container')
);
Here's the fiddle

Related

Passing Props to grandchild React

Child:
class Plus extends React.Component{
constructor(props){
super(props)
this.handleClick = this.handleClick.bind(this)
}
handleClick(){
console.log('It's Working!')
this.props.handleButtonChange()
}
render(){
return (
<div>
<i
className="fa fa-plus fa-2x"
onClick={() => this.handleClick()}
></i>
</div>
);
}
}
export default Plus;
Parent:
class NoteCreation extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="note-creation">
<form action="">
<Plus handleButtonChange={this.props.handleButtonChange} />
</form>
</div>
);
}
}
export default NoteCreation;
GrandParent Component:
class App extends React.Component {
constructor() {
super();
this.state = {
buttonStat : false
};
this.handleButtonChange = this.handleButtonChange(this);
}
handleButtonChange(){
this.setState({
buttonStat : true
})
}
render() {
return (
<div className="App">
<NoteCreation
handleButtonChange={this.handleButtonChange}
/>
</div>
);
}
}
export default App;
I simply want to pass the method handleButtonChange() from grandParent all the way to child (which is a button), as the button is clicked it triggers the click event which fires up this function making changes in grandparent component(i.e. setting button state)
where am i wrong at or this approach is completely wrong I am really new to react.
i am just want to set state in grandParent via child click event.
i keep getting this error TypeError: this.props.handleButtonChange is not a function
would appreciate any help
You have a typo in your top component
It should be
this.handleButtonChange = this.handleButtonChange.bind(this);
and not
this.handleButtonChange = this.handleButtonChange(this);
Alternatively you can declare your method like this
handleButtonChange = () => {
this.setState({
buttonStat : true
})
}
without using bind at all.
In grandParent component, you should bind it to current component by keyword bind to pass it through props.
this.handleButtonChange = this.handleButtonChange.bind(this);

React trying to assign props to state variable doesn't work

I'm trying to assign props that I get from parent component and assign it to state in child component(because I want to manipulate the props data I assign it to state first).
When I log the state variable it comes out as an empty array but when I make a new variable in render and assign props to it and log it. It does show the data I need. Also, when I just log this.props I can definitely see that props holds the data I need.
I've assigned props to state a couple of times before, so I'm not sure what is so different this time for it not to work.
Parent component where I pass props to child:
<ShowAvailableTimeslots onClick={this.getSelectedTimeslot} allTimeSlots={this.state.AvailabletimeSlots} />
Child component where I try to assign props to state:
class ShowAvailableTimeslots extends Component {
constructor(props) {
super(props)
this.state = {
sliceEnd: 5,
sliceStart:0,
selectedSlotValue: "",
timeSlotArr: this.props.allTimeSlots,
// timeSlotSlice: timeSlotArr.slice(this.state.sliceStart, this.state.sliceEnd)
}
}
handleTimeSlotClick = (timeSlot) => {
this.setState({ selectedSlotValue: timeSlot }, () => {
this.props.onClick(this.state.selectedSlotValue)
console.log('time slot value', timeSlot)
});
}
previousSlots =()=>{
var test;
}
forwordSlots =()=>{
var test;
}
render() {
var timeSlotArrRender = this.props.allTimeSlots;
return (
<React.Fragment>
{console.log("state", this.state.timeSlotArr)} // --> doesn't show data
{console.log("props", this.props)} // --> does show data
{console.log("render variable", timeSlotArrRender )} // --> does show data
<button className="button btn" onClick={() => this.previousSlots()} disabled={this.state.sliceStart === 0}>left</button>
{/* {this.state.timeSlotArr.map(timeSlot => <a className="timeslot btn " key={timeSlot} value={timeSlot} onClick={() => this.handleTimeSlotClick(timeSlot)}>{timeSlot}</a>)
} */}
<button className="button btn">right</button>
</React.Fragment>
)
}
}
export default ShowAvailableTimeslots
the constructor is called when the component life cycle begins.
You are passing the this.state.AvailabletimeSlots from the parent and by then the constructor have already been called and the assignment for timeSlotArr is already done, so
timeSlotArr: this.props.allTimeSlots // will not work
You have to get help of life cycle methods or hooks
componentWillReceiveProps(nextProps){
this.setState({timeSlotArr: nextProps.allTimeSlots })
}
According to new changes you have to use
static getDerivedStateFromProps(nextProps, prevState){
return {
timeSlotArr: nextProps.allTimeSlots
};
}
I have it working just fine. https://jsfiddle.net/85zc4Lxb/
class App extends React.Component {
render() {
return (<Child passing="I am being passed to child" />);
}
}
class Child extends React.Component {
constructor(props) {
super(props)
this.state = {
passedProp: this.props.passing,
}
}
render() {
return (
<React.Fragment>
<button>{this.state.passedProp}</button>
</React.Fragment>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
);
I try to recreate the scenario and it work try saving all your files again and then check
parents component
import React, { Component } from "react";
import TestOne from "./Components/TestOne/TestOne";
export class App extends Component {
state = {
x: "x data",
y: "y data",
};
render() {
return (
<div>
<TestOne x={this.state.x} allTimeSlots={this.state.y}/>
</div>
);
}
}
export default App;
Child component
import React, { Component } from "react";
export class TestOne extends Component {
constructor(props) {
super(props);
this.state = {
sliceEnd: 5,
sliceStart: 0,
selectedSlotValue: "",
timeSlotArr: this.props.x,
};
}
render() {
var timeSlotArrRender = this.props.allTimeSlots;
return (
<React.Fragment>
{console.log("state", this.state.timeSlotArr)}
{console.log("props", this.props)}
{console.log("render variable", timeSlotArrRender)}
<button className="button btn">right</button>
</React.Fragment>
);
}
}
export default TestOne;
Result:
I think you are missing this.setState({})

Parent state change not updating child props

I'm trying to update a child based on the props provided by it's parent. The way it works right now is that the parent's state contains a variable called 'paused' which is provided to the child like this:
class Parent extends Component {
constructor(props) {
super(props)
this.state = {
history: this.props.history,
paused: false,
}
}
render() {
let paused = this.state.paused
return (
<ChildContainer
graph={
<Child
paused={paused}
/>
}
/>
)
}
Child then uses it like this:
render() {
return (
<div>
{'paused:' + this.props.paused}
</div>
)
}
Paused is a boolean, the usage above is just for testing, since I couldn't get it to update where I want, the behaviour is the same like this.
Paused is being updated in the parent, but not the child.
I've read a lot of questions like this, but I'm at a loss.
Any help would be greatly appreciated.
I can't seem to find a problem with this based on the code you've provided. Here is working proof.
If ChildContainer has any logic that could interfere then I could be wrong, but as is, this works:
class Parent extends React.Component {
constructor(props) {
super(props)
this.state = {
history: this.props.history,
paused: false,
}
}
render() {
let paused = this.state.paused // I agree with #Kuo-hsuan Hsu this is unnecessary
return (
<ChildContainer
toggle={() => this.setState({ paused: !this.state.paused })}
graph={<Child paused={paused}/>}
/>
)
}
}
class ChildContainer extends React.Component {
render() {
return (
<div>
{this.props.graph}
<button onClick={this.props.toggle}>Toggle</button>
</div>
);
}
}
class Child extends React.Component {
render() {
return (
<div>{'paused:' + this.props.paused}</div>
)
}
}
ReactDOM.render(<Parent />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

React - How to pass data among parent - child AND among siblings at the same time?

I have a component (LoginScreen). In that component I want to display my Login component as the first thing the user sees. When user clicks on sign up button, in my Loginscreen component, the Signup Component should be rendered instead. From the signup Component the user finds a button 'Back to Login' and when clicked, again the Login Component should be rendered insight the componentt Loginscreen. Im new to React and trying to follow tutorials about how to share data among parent/child and among siblings but am completely confused. Any help would be amazing!
class Loginscreen extends React.Component{
constructor(props) {
super(props)
this.state = {
status:false
}
this.changeStatus = this.changeStatus.bind(this);
}
changeStatus(status) {
this.setState({
status: true
});
}
render() {
return (
<div>
<Login status={this.state.status}/>
<Signup status={this.state.status}/>
<p>No account yet?</p>
<button onClick={this.changeStatus}>Sign up</button>
// if Signup Component is rendered insight Loginscreen, then this button should also not be rendered.
</div>
)
}
}
class Signup extends React.Component {
...
//where can I even call this function in my case?
handleChange() {
const status:true;
this.props.onClick(status);
}
...
<button><Link to='/loginscreen'>Back to Login</Link></button>
...
}
class Login extends React.Component {
...
...
}
Ok, I believe you are looking for routing?
Solution 1 (recommended):
Using React-Router to handle the routing and the React-Router/Link component will handle the switching.
Solution 2:
Using a simple state routing, saving the view name in the parent component and display the view based on it, also passing a function to update this view:
class App extends React.Component{
constructor(props) {
super(props)
this.state = {
view: 'login' // its login because we want it to be the default
}
this.changeView = this.changeView.bind(this);
}
changeView(view) {
this.setState({
view // ES6, if the key & value variable name the same, just type it once.
});
}
render() {
const { view } = this.state; // thats es6 destructuring, use it to make the variables clean instead of repeating the this.state/this.props
return (
<div>
{
view == 'login'
? (<Login changeView={this.changeView}/>)
: (<Signup changeView={this.changeView}/>)
}
</div>
)
}
}
class Signup extends React.Component {
...
render(){
const { changeView } = this.props;
<div className="Signup">
{/* Signup Form Here */}
<p>Already registered?</p>
{/* Wrapping the event in arrow function to avoid auto invoke */}
<button onClick={() => changeView('login')}>Login</button>
</div>
}
...
}
class Login extends React.Component {
...
render(){
const { changeView } = this.props;
<div className="Login">
{/* Login Form Here */}
<p>No account yet?</p>
<button onClick={() => changeView('signup')}>Sign up</button>
</div>
}
...
}
If there are more than 2 views you can wrap the return in a normal If statement, or move it in a separate method.
or you can use a dynamic component rendering, something like this:
render() {
const { view } = this.state;
const ViewComponent = require(`./views/${view}.jsx`);
return (<div><ViewComponent.default changeView={this.changeView} /></div>);
}

Show sibling components reactJs

I'm new on react world, I would show components from sibling components.
I have parent component:
import Toast from './components/Toast/Toast'
class App extends Component {
constructor(){
super();
this.state = {
showToast:false
};
}
render() {
return (
<div id="cont">
<Toast showToast={this.state.showToast}/>
<Header />
</div>
);
}
}
In my Toast component:
class Toast extends Component {
constructor(props) {
super(props);
}
render() {
const showToast = this.props.showToast;
let toast = null;
if (showToast) {
toast = <div className="visible">Toast Ok</div>;
}else{
toast = null;
}
return (
<div>
{toast}
</div>
);
}
}
export default Toast;
And in my Header component I have:
class Header extends Component {
render() {
return (
<button> // With click, show toastComponents so setState parent </button>
)
}
So if I click on button I would set state key showToast for show my components.
You can pass a function down to your <Header> component, then call it when the button is clicked.
let showToast = () => this.setState({ showToast: true });
// ...
<Toast showToast={this.state.showToast}/>
<Header onClick={showToast}>
Then all you need to do is pass this prop through to the click handler inside <Header>.
<button onClick={this.props.onClick}>

Categories