I'm new to React (also fairly new to Javascript in general) and trying to wrap my head around what can be done with setState to re-render React elements on the page.
Is there a way to use setState in one component to change the state of a completely different element (i.e. components that maybe only share the DOM root node)? I've tried to implement this but am getting the error "myElementOne.setState is not a function".
Is there a another way I should be approaching this?
var App = React.createClass({
render() {
return (
<div>
<ElementOne id="abc12345"/>
<ElementTwo/>
</div>
);
}
});
var ElementOne = React.createClass({
getInitialState() {
return ({isShowing: true});
},
render() {
if (this.state.isShowing) {
return (
<div id="abc12345">
<h1>Hello World!</h1>
</div>
);
} else {
return <div/>;
}
}
});
var ElementTwo = React.createClass({
render() {
return <a href="#" onClick={this.toggle.bind(null,this)}>Click here to Show/Hide!</a>;
},
toggle() {
var myElementOne = document.getElementById("abc12345");
myElementOne.setState({isShowing: false});
}
});
ReactDOM.render(<App/>,document.getElementById('content'));
You can achieve this in the following way: http://codepen.io/PiotrBerebecki/pen/YGEmBE
The idea is to:
Maintain state in your parent component (App)
Pass this state to ElementOne
Pass ability to modify the state by a callback function passed to ElementTwo
Full code:
var App = React.createClass({
getInitialState() {
return ({
isShowingInParent: true
});
},
toggleInParent() {
this.setState({
isShowingInParent: !this.state.isShowingInParent
});
},
render() {
return (
<div>
<ElementOne id="abc12345" isShowing={this.state.isShowingInParent}/>
<ElementTwo toggle={this.toggleInParent}/>
</div>
);
}
});
var ElementOne = React.createClass({
render() {
if (this.props.isShowing) {
return (
<div id="abc12345">
<h1>Hello World!</h1>
</div>
);
} else {
return <div/>;
}
}
});
var ElementTwo = React.createClass({
render() {
return <a href="#" onClick={this.props.toggle.bind(this)}>Click here to Show/Hide!</a>;
}
});
ReactDOM.render(<App/>,document.getElementById('content'));
Related
I'm trying to generate several divs based off an array - but I'm unable to. I click a button, which is supposed to return the divs via mapping but it's returning anything.
class History extends Component {
constructor(props) {
super(props);
this.state = {
info: ""
};
this.generateDivs = this.generateDivs.bind(this);
}
async getCurrentHistory(address) {
const info = await axios.get(`https://api3.tzscan.io/v2/bakings_history/${address}?number=10000`);
return info.data[2];
}
async getHistory() {
const info = await getCurrentHistory(
"tz1hAYfexyzPGG6RhZZMpDvAHifubsbb6kgn"
);
this.setState({ info });
}
generateDivs() {
const arr = this.state.info;
const listItems = arr.map((cycles) =>
<div class="box-1">
Cycle: {cycles.cycle}
Count: {cycles.count.count_all}
Rewards: {cycles.reward}
</div>
);
return (
<div class="flex-container">
{ listItems }
</div>
)
}
componentWillMount() {
this.getHistory();
}
render() {
return (
<div>
<button onClick={this.generateDivs}>make divs</button>
</div>
);
}
You are not actually rendering the the divs just by invoking the generateDivs function, the JSX it is returning is not being used anywhere.
To get it to work you could do something like -
render() {
return (
<div>
<button onClick={this.showDivs}>make divs</button>
{this.state.isDisplayed && this.generateDivs()}
</div>
);
}
where showDivs would be a function to toggle the state property isDisplayed to true
The main point is that the JSX being returned in the generateDivs function will now be rendered out in the render function. There is many ways to toggle the display, that is just one straight forward way
I'm trying to use react to create a list of elements, and update the state of the parent of this list when a single element is clicked.
The overall container is App.jsx (the grandparent)
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedClass: null,
query: "cs 2110"
}
this.handleSelectClass.bind(this);
}
handleSelectClass(classId) {
console.log(classId);
//get the id of the course and get full course details
Meteor.call('getCourseById', classId, function(error, result) {
if (!error) {
console.log(this.state);
this.setState({selectedClass: result, query: ""}, function() {
console.log(this.state.selectedClass);
console.log(this.state.query);
});
} else {
console.log(error)
}
});
}
//check if a class is selected, and show a coursecard only when one is.
renderCourseCard() {
var toShow = <div />; //empty div
if (this.state.selectedClass != null) {
toShow = <CourseCard course={this.state.selectedClass}/>;
}
return toShow;
}
render() {
return (
<div className="container">
<header>
<h1>Todo List</h1>
</header>
<div className='row'>
<input />
<Results query={this.state.query} clickFunc={this.handleSelectClass}/>
</div>
<div className='row'>
<div className="col-md-6">
{this.renderCourseCard()}
</div>
<div className="col-md-6 panel-container fix-contain">
<Form courseId="jglf" />
</div>
</div>
</div>
);
}
}
The parent container is Results.jsx
export class Results extends Component {
constructor(props) {
super(props);
}
renderCourses() {
if (this.props.query != "") {
return this.props.allCourses.map((course) => (
//create a new class "button" that will set the selected class to this class when it is clicked.
<Course key={course._id} info={course} handler={this.props.clickFunc}/>
));
} else {
return <div />;
}
}
render() {
return (
<ul>
{this.renderCourses()}
</ul>
);
}
}
and the Course list item is a grandchild component
export default class Course extends Component {
render() {
var classId = this.props.info._id;
return (
<li id={classId} onClick={() => this.props.handler(classId)}>{this.props.info.classFull}</li>
);
}
}
I followed the suggestions here Reactjs - How to pass values from child component to grand-parent component? to pass down a callback function, but the callback still does not recognize the state of the grandparent. console.log(this.state) in App.jsx returns undefined even though the classId is correct, and the error says "Exception in delivering result of invoking 'getCourseById': TypeError: this.setState is not a function"
Is this a problem with the binding? I've tried this without Course as its own component and have the same issue.
Quickly looking through the code. I can see that problem one lies here. Even though you've bounded your function to your component, you're using a meteor call that scopes the result in it's own function scope which means that it won't be able to access this.setState. You can use fat arrow function to get around this problem, but you need to make sure that you are using ES6.
Meteor.call('getCourseById', classId, function(error, result) => {
if (!error) {
console.log(this.state);
this.setState({selectedClass: result, query: ""}, function() {
console.log(this.state.selectedClass);
console.log(this.state.query);
});
} else {
console.log(error)
}
});
TO
Meteor.call('getCourseById', classId, (error, result) => {
if (!error) {
console.log(this.state);
this.setState({selectedClass: result, query: ""}, () => {
console.log(this.state.selectedClass);
console.log(this.state.query);
});
} else {
console.log(error)
}
});
You've also binded your function incorrectly to your component.
this.handleClassSubmit = this.handleClassSubmit.bind(this);
First watch this, so you can see the behavior going on.
Timing Issue (JS in one component relies on another component to exist first)
I need to be able to somehow check that another component exists before I apply this JS in this component's ComponentDidMount
const TableOfContents = Component({
store: Store('/companies'),
componentDidMount() {
const el = ReactDOM.findDOMNode(this);
console.log("table of contents mounted");
if(document.getElementById('interview-heading') && el) {
new Ink.UI.Sticky(el, {topElement: "#interview-heading", bottomElement: "#footer"});
}
},
it does hit my if statement and does hit the Sticky() function but I still think I have problems when I refresh the page whereas this JS isn't working on the interview-heading component for some reason.
Note the id="interview-heading" below.
const InterviewContent = Component({
componentDidMount() {
console.log("InterviewContent mounted");
},
render(){
var company = this.props.company;
return (
<div id="ft-interview-content">
<p className="section-heading bold font-22" id="interview-heading">Interview</p>
<InterviewContentMain company={company}/>
</div>
)
}
})
const InterviewContentMain = Component({
componentDidMount() {
console.log("InterviewContentMain mounted");
},
render(){
var company = this.props.company;
return (
<div id="interview-content" className="clear-both">
<div className="column-group">
<div className="all-20">
<TableOfContents company={company}/>
</div>
<div className="all-80">
<InterviewContainer company={company}/>
</div>
</div>
</div>
)
}
})
export default InterviewContent;
I realize TableOfContents is being rendered before InterviewContent because it's a child of TableOfContents and I believe in React children are rendered before their parents (inside-out)?
I think you need to rethink your component structure. I don't know your entire setup, but it looks like you should probably have a shared parent component pass the message from TableOfContents to InterviewContent:
const InterviewContentMain = Component({
getInitialState() {
return {
inkEnabled: false
}
},
componentDidMount() {
console.log("InterviewContentMain mounted");
},
enableInk() {
this.setState({ inkEnabled: true });
}
render(){
var company = this.props.company;
return (
<div id="interview-content" className="clear-both">
<div className="column-group">
<div className="all-20">
<TableOfContents inkEnabled={this.state.inkEnabled} company={company}/>
</div>
<div className="all-80">
<InterviewContainer enableInk={this.enableInk} company={company}/>
</div>
</div>
</div>
)
}
})
const TableOfContents = Component({
store: Store('/companies'),
componentDidMount() {
console.log("table of contents mounted");
this.props.enableInk();
},
...
const InterviewContent = Component({
enableInk() {
new Ink.UI.Sticky(el, {topElement: "#interview-heading", bottomElement: "#footer"});
},
// willReceiveProps isn't called on first mount, inkEnabled could be true so
componentDidMount() {
if (this.props.inkEnabled) {
this.enableInk();
}
},
componentWillReceiveProps(nextProps) {
if (this.props.inkEnabled === false && nextProps.inkEnabled === true) {
this.enableInk();
}
}
render(){
var company = this.props.company;
return (
<div id="ft-interview-content">
<p className="section-heading bold font-22" id="interview-heading">Interview</p>
<InterviewContentMain company={company}/>
</div>
)
}
})
Then have componentDidMount trigger this.props.enableInk().
Or better yet, why not just put the Ink.UI.Sticky call in componentDidMount of InterviewContent?
Not sure what I'm doing wrong but my component wrapped in setTimeout is not being rendered to the DOM:
const ContentMain = Component({
getInitialState() {
return {rendered: false};
},
componentDidMount() {
this.setState({rendered: true});
},
render(){
var company = this.props.company;
return (
<div id="ft-content">
{this.state.rendered && setTimeout(() => <Content company={company}/>,3000)}
</div>
)
}
})
I'd bet this isn't working because the render method needs all of its input to be consumed at the same time and it can't render other components in retrospect, there's a certain flow to React. I'd suggest to separate the timeout from render method anyway for logic's sake, and do it in componentDidMount like this:
const ContentMain = Component({
getInitialState() {
return {rendered: false};
},
componentDidMount() {
setTimeout(() => {
this.setState({rendered: true});
}, 3000);
},
render(){
if (!this.state.rendered) {
return null;
}
var company = this.props.company;
return (
<div id="ft-content">
<Content company={company}/>
</div>
)
}
})
Changing the state triggers the render method.
On a side note - even if your original approach worked, you'd see the component flicker for 3 seconds every time it got rendered after the initial load. Guessing you wouldn't want that :)
I have a small problem where I have parent class and child class. I want to modify the state that was initialized in parent class so that I can see updated state in parent class. Here's the code:
var Parent = React.createClass({
getInitialState: function(){
return{
my_value: 0
}
},
_increaseValue: function(){
this.state.my_value++;
},
render: function(){
return(
<div><Child /></div>
)
}
});
var Child = React.createClass({
render: function(){
//at button I want to access _increaseValue function of parent
return (
<div>
<button onClick={_increaseValue}>Increase</button>
</div>
);
}
});
Now when user clicks the button in child class I would like to get the updated my_value in parent class, thus my questions are:
Is it possible?
If yes, how it is done?
Is this good practice or no?
Is it possible?
yes, it is possible
If yes, how it is done?
you can pass parent method to child through props, like so
var Parent = React.createClass({
getInitialState: function(){
return {
my_value: 0
}
},
onChangeValue: function () {
var value = this.state.my_value + 1;
this.setState({
my_value: value
})
},
render: function() {
return <div>
<Child
onChangeValue={ this.onChangeValue }
value={ this.state.my_value }
/>
</div>;
}
});
var Child = React.createClass({
_handleClick: function(){
this.props.onChangeValue();
},
render: function(){
return <div>
<h1> { this.props.value } </h1>
<button onClick={ this._handleClick }>Increase</button>
</div>
}
});
Example
Is this good practice or no?
It is good practice
You need to pass function via props into your child component. And when you need to change you call this function. It is normal practice and react way.
Example:
var Parent = React.createClass({
getInitialState: function(){
return{
my_value: 0
}
},
onChildClick: function() {
this.setState({
my_value: this.state.my_value + 1
})
},
render: function(){
return(
<div>
{this.state.my_value}
<Child onClick={this.onChildClick.bind(this)}/>
</div>
)
}
});
var Child = React.createClass({
_handleClick: function(){
this.props.onClick();
},
render: function(){
return (
<div>
<button onClick={this._handleClick}>Increase</button>
</div>
);
}
});
Example on JSFiddle