Lonnie McGill Lonnie McGill - 1 month ago 10
React JSX Question

I am trying to create a callback in React that would let me pass state from the child to the parent

I am trying to create a callback in React that would let me pass state from the child to the parent. However, I am getting "cbChildToParent: undefined". I'm not sure how to fix it.

Here is my code for the parent:

import React from 'react';

import ProjectsHeader from './ProjectsHeader.jsx';
import ProjectsBody from './projectsbodycomponents/ProjectsBody.jsx';

export default class Projects extends React.Component {
constructor() {
super()
this.state = {
hidden: false
};
}



headerChange(newStateFromHeader) {
this.setState({ hidden: newStateFromHeader });
}

render() {
return (
<div>
{console.log(this.state.hidden)}
<section className="projects-background"></section>
<ProjectsHeader parentToChild={this.state.hidden} cbChildToParent={this.sendToParent} />
<ProjectsBody />

</div>
)
}
}


Here is my code for the child:

import React from 'react';
import jQuery from 'jquery';
import $ from 'jquery';

import ProjectsHeaderLinks from "./ProjectsHeaderLinks.jsx";

require('../../../stylesheets/component/projects/ProjectsHeaderLinks.scss');

export default class ProjectsHeader extends React.Component {

constructor(props) {
super(props)

this.state = {
hidden: this.props.parentToChild,
class: "not-sticky-div",
class2: "hidden-span",
class3: "projects-quote-hidden",
class4: "project-title-hidden"
}
console.log(this.props);
}

componentDidMount() {
this.scrollTop();
}

shouldComponentUpdate(nextProps, nextState){
return this.state.class === "not-sticky-div";
}


componentWillUnmount(){
$(window).unbind("scroll");
}


scrollTop(){
var that = this;
let head = $(".header");
let stick = "sticky";
let projHead = document.getElementById("projHead");
$(window).scroll(function() {
$(window).scrollTop() > 400
? head.addClass(stick)
: head.removeClass(stick);
let newValue = projHead.classList.value.split(' ', 2);
for (var i = 0; i < newValue.length; i++) {
newValue[i] === "sticky"
? that.setState({hidden: true, class: "sticky-div", class2: "visible-span", class3: "projects-quote", class4: "projects-title"})
: that.setState({hidden: false, class: "not-sticky-div", class2: "hidden-span", class3: "projects-quote-hidden", class4: "projects-title-hidden"});
}
})
}

sendToParent(){
console.log(this.state.hidden);
let newStateFromHeader = this.state.hidden;
this.setState({hidden: newStateFromHeader});
this.props.cbChildToParent(newStateFromHeader);
}



render() {
return (
<div id="projHead" className="header">
<div className={this.state.class}>
{this.state.class === "not-sticky-div"
? <div>"I love to code" --Lonnie McGill</div>
: null
}
</div>
<div className={this.state.class3}>
<div className={this.state.class4}>This is my project page, go ahead and look around.</div>
</div>
<ProjectsHeaderLinks state={this.state}/>
</div>
)
}
}

Answer

On your parent, component, change this:

<ProjectsHeader parentToChild={this.state.hidden} cbChildToParent={this.sendToParent} />

to:

<ProjectsHeader parentToChild={this.state.hidden} cbChildToParent={this.headerChange} />

You're getting the undefined error because you're trying to reference the method sendToParent on the parent class, when it doesn't exist.

Comments