I'm creating a survey-type app in React. The questions are arranged as items in a carousel.
When the user selects an answer - I AM able to change the state of the question (setting a button as active). However, I would also like to advance the carousel to the next item.
var Question = React.createClass({
getInitialState() {
return {
selectedIndex: -1
};
},
handleClick(index) {
this.setState({selectedIndex: index});
this.props.onQuestionAnswered();
},
render() {
var answerItems = answerChoices.map(function (answer) {
return (
<ReactBootstrap.ListGroupItem
key={answer.text}
text={answer.text}
active={answer.index == this.state.selectedIndex}
onClick={this.handleClick.bind(this, answer.index)}>
{answer.text}
</ReactBootstrap.ListGroupItem>
);
}.bind(this));
return (
<div>
<h3>{this.props.qText.text}</h3>
<ReactBootstrap.ListGroup>
{answerItems}
</ReactBootstrap.ListGroup>
</div>
);
}
});
var Carousel = React.createClass({
getInitialState() {
return {
index: 0,
};
},
handleSelect() {
this.setState({
index: 1
});
},
render() {
var questionItems = questionContent.map(function (question) {
return (
<ReactBootstrap.CarouselItem key={question.text}>
<Question qText={question}/>
</ReactBootstrap.CarouselItem>
);
});
return (
<ReactBootstrap.Carousel interval={false} activeIndex={this.state.index} onQuestionAnswered={this.handleSelect}>
{questionItems}
</ReactBootstrap.Carousel>
);
}
});
var App = React.createClass({
render() {
return (
<div>
<h4>Survey</h4>
<Carousel/>
</div>
);
}
});
React.render(<App/>, document.getElementById('content'));
I have a full JSFiddle available: http://jsfiddle.net/adamfinley/d3hmw2dn/
Console says the following when I try to call the function prop:
Uncaught TypeError: this.props.onQuestionAnswered is not a function
What do I have to do to call the parent function? Alternatively - is there a better pattern I should be using? (first time with React).
It looks like the error is coming from the Question component, which doesn't have the onQuestionAnswered prop. So you simply need to pass it in your questionItems map iteration.
var self = this;
var questionItems = questionContent.map(function (question) {
return (
<ReactBootstrap.CarouselItem key={question.text}>
<Question onQuestionAnswered={self.handleSelect} qText={question}/>
</ReactBootstrap.CarouselItem>
);
});
Related
Learning React & chrome extensions the hard way, so my this.url has one of 2 values:
null or www.sample.com
I'm getting the url value from an async call using chrome.storage.local.get(...) so once I get the response from the storage I set the value to this.url and want to use such value to display a component using a ternary operator like so:
export default React.createClass({
url: '',
componentDidMount: function(){
this.observeResource();
},
observeResource(){
var self = this
function getValue(callback){
chrome.storage.local.get('xxxx', callback);
}
getValue(function (url) {
this.url = url.xxxx;
return this.url;
});
},
/* RENDER */
render: function(){
return (
<div className="app">
<AppHeader />
{this.url != null ?
<VideoFoundOverlay />
: null}
{this.url == null ?
<VideoNotFoundOverlay />
: null }
</div>
)
}
});
I can not get the value of this.url outside of the observeResource function. Where am I going wrong?
You need to use this.setState()
constructor(props) {
super(props)
this.state = {
url: ''
}
}
componentDidMount() {
setTimeout(() => {
this.setState({ url: 'www.sample.com' })
}, 1000)
}
render() {
return <div>this.state.url</div>
}
Look at working example in JSFiddle
The this inside the following call points to window rather than the component itself, since the callback is invocated as a function, the window is actually the "owner" of the function.
getValue(function (url) {
this.url = url.newswireStoryUrl;
return this.url;
});
To avoid this error, you could use self.url instead, since you have explicitly assign this to self. Or you could use Arrow Function instead of function(...).
To render the component, you should declare url as a state, because only state changes will cause the render function to be called.
export default React.createClass({
getInitialState: function() {
return { url: '' };
},
componentDidMount: function(){
this.observeResource();
},
observeResource(){
var self = this;
function getValue(callback){
chrome.storage.local.get('newswireStoryUrl', callback);
}
getValue(function (url) {
self.setState({ url: url.newswireStoryUrl });
return self.state.url;
});
},
/* RENDER */
render: function(){
return (
<div className="app">
<AppHeader />
{this.state.url !== null ?
<VideoFoundOverlay />
: null}
{this.state.url === null ?
<VideoNotFoundOverlay />
: null }
</div>
);
}
});
I would go by and do it like this:
export default React.createClass({
getInitialState: function(){
return {
url: null
}
},
componentDidMount: function(){
this.observeResource();
},
observeResource(){
var self = this
function getValue(callback){
chrome.storage.local.get('newswireStoryUrl', callback);
}
getValue(function (url) {
//here you are seting the state of the react component using the 'self' object
self.setState({url: url.newswireStoryUrl})
//not sure if the 'return this.url' is needed here.
//here the 'this' object is not refering to the react component but
//the window object.
return this.url;
});
},
videoNotFound: function(){
return (
<div className="app">
<AppHeader />
<VideoNotFoundOverlay />
</div
)
},
/* RENDER */
render: function(){
if(this.state.url == null){
return this.videoNotFound()
}
return (
<div className="app">
<AppHeader />
<VideoFoundOverlay />
</div>
)
}
});
Lets say I have a class with a state level array
ElementsClass = React.createClass({
getInitialState: function() {
return {
elements: []
}
},
addElement: function() {
var element = {
name: ""
};
},
render() {
return (
{this.state.elements.map(function (element, i) {
return <input value={element.name} />
}
)}
)
}
The idea being that I can dynamically add to the elements array and have a new input field appearing.
How do I bind the data so that I am able to change the value in the input field and have that reflect automatically in the correct element in the elements array?
To dynamically sync your inputs with your state array you can use someting called linkState from the react-catalyst package. Once you've installed it with npm you can use it in the following way:
//need to import
import Catalyst from 'react-catalyst';
ElementsClass = React.createClass({
// mixin the linkedstate component
mixins : [Catalyst.LinkedStateMixin],
getInitialState: function() {
return {
elements: []
}
},
addElement: function() {
var element = {
name: ""
};
//add to elements array
this.state.elements.push(element);
//let react know to rerender necessary parts
this.setState({
elements : this.state.elements
});
},
render() {
return (
{this.state.elements.map(function (element, i) {
//use the linkState method
return <input valueLink={this.linkState('elements.'+i+'.name')} />
}
)}
)
}
The reason we need the react-catalyst package is that natively React's valueLink will only link top level state items, in your case elements. Obviously this isn't particularily useful but thankfully it's a fairly easy problem to solve.
Note: for iterated items like your element inputs, you need to provide a unique key. Something like the following (might need modifying to be more specific):
{this.state.elements.map(function (element, i) {
//use the linkState method
return <input valueLink={this.linkState('elements.'+i+'.name')} key={'elinput' + i} />
}
)}
This doesn't have any outward effect on your app, it's mostly to help react target the element internally.
If you want to do this with just ES5 and React, one solution would be this:
var ElementsClass = React.createClass({
getInitialState: function() {
return {
elements: []
}
},
createElement: function(){
var element = {
name: ''
};
this.setState({elements: this.state.elements.concat(element)});
},
updateElement: function(pos, event) {
var value = event.target.value;
var updatedElements = this.state.elements.map(function(element, i){
if (i === pos){
return {name: value};
}
return element;
});
this.setState({elements: updatedElements});
},
render: function() {
console.log(this.state.elements);
return (
<div>
{this.state.elements.map(function (element, i) {
var boundClick = this.updateElement.bind(this, i);
return <input key={i} onKeyUp={boundClick}/>
}.bind(this))}
<button onClick={this.createElement}>Add Element</button>
</div>
)
}
});
React.render(<ElementsClass />, document.getElementById('app'));
You want to treat component state as immutable, so you don't want to call a mutating method like push on elements.
These situations are handled easily with custom links packages.
State and Forms in React, Part 3: Handling the Complex State
import Link from 'valuelink';
// linked inputs will be deprecated, thus we need to use custom wrappers
import { Input } from 'valueLink/tags.jsx'
const ElementsClass = React.createClass({
getInitialState: function() {
return {
elements: []
}
},
render() {
// Take link to the element
const elementsLink = Link.state( this, 'elements' );
return (
<div>
{ elementsLink.map( ( elementLink, i ) => (
<Input key={ i } valueLink={ elementLink.at( 'name' ) } />
))}
<button onClick={ elementsLink.push({ name : '' })}>
Add Elements
</button>
</div>
);
}
});
I have a react component that gets a prop from another parent component. I checked in react developer tools, and the prop is for sure getting passed.
Here is my code:
var Post = React.createClass({
getInitialState: function () {
return { content: this.props.content };
},
rawMarkup: function() {
var rawMarkup = marked(this.state.content, {sanitize: true});
return { __html: rawMarkup };
},
render: function() {
return (
<div>
{this.props.content }
<div dangerouslySetInnerHTML={ this.rawMarkup() } />
</div>
);
}
});
This results in the error: Uncaught TypeError: Cannot read property 'replace' of undefined for marked.js. However, when I setInitialState to return { content: "Blah" }; it works fine. So it looks like the prop is not set there?
But when I do the {this.props.content} in the render, it works fine?
It's just that your state is out of date. Try adding this:
getInitialState: function () {
return { content: this.props.content || '' };
},
componentWillReceiveProps: function(nextProps) {
if (this.props.content !== nextProps.content) {
this.setState({
content: nextProps.content || '',
});
}
},
Read more about components' lifecycle here.
Edit: This will solve your problem, but generally using state this way is an anti-pattern (unless content is an input or something, you haven't mentioned that in your question). What you should do instead is create a new component that will only accept content prop and render marked output. I suggest you use a stateless functional component here.
var MarkedContent = (props) => {
return <div dangerouslySetInnerHTML={{__html: marked(props.content || '', {sanitize: true})}}></div>
}
Drop this component inside your Post component like this:
var Post = React.createClass({
render: function() {
return (
<div>
<MarkedContent content={this.props.content} />
</div>
);
}
});
Thanks David Walsh!
You don't have to synchronize props with state, even more using props in state is anti-pattern. render() is called each time when props or state changed
However, it's not an anti-pattern if you make it clear that
synchronization's not the goal here
var Post = React.createClass({
rawMarkup: function() {
var rawMarkup = marked(this.props.content, {sanitize: true});
return { __html: rawMarkup };
},
render: function() {
return (
<div>
{this.props.content }
<div dangerouslySetInnerHTML={ this.rawMarkup() } />
</div>
);
}
});
Do all your Post's have content?
I guess you are getting the list of posts from somewhere (a database) and for some of them the content is undefined, hence the:
Uncaught TypeError: Cannot read property 'replace' of undefined
Probably this.props.content has undefined as value. Then, this.state.content is initialized to undefined and when you call marked(this.state.content, {sanitize: true}) you get this error because you are passing an undefined to marked.
I have an array of objects which is passed as a property to a list that maps them to <li>.
I would like to be able, for any individual item, to click on an item from the list, and receive that object and then assign it to the root component's state - so I could then pass it on to another child comp.
var Menu = React.createClass({
render: function() {
return (<ul>
{
this.props.posts.map(function(post){
return <li><a onClick={function(e){console.log(e)}}>{post.title}</a></li>
})
}
</ul>)
}
})
https://jsfiddle.net/nbenita/yxw1z42q/
Thanks!
Pass a callback function into your Menu component as a prop and use Function.prototype.bind() to partially apply the relevant post object as an argument:
Updated fiddle: https://jsfiddle.net/yxw1z42q/2/
var Blog = React.createClass({
getInitialState: function() {
return {
selectedPost:this.props.posts[0]
};
},
onPostSelected: function(selectedPost) {
this.setState({
selectedPost: selectedPost
});
}
render: function() {
return (<div>
<Menu posts={this.props.posts} onClick={this.onPostSelected} />
<Post content={this.state.selectedPost} />
</div>)
}
})
var Menu = React.createClass({
render: function() {
return (<ul>
{
this.props.posts.map(function(post){
return <li><a onClick={this.props.onClick.bind(this, post)}>{post.title}</a></li>
}, this)
}
</ul>)
}
})
Further reading
React Docs - Communicate Between Components
react-training - Simple Component Communication
So I have this component
var LineItemRowsWrapper = React.createClass({
current_lineitem_count: 0,
getAjaxData: function(){
var lineitem_data = [];
for(var i = 0; i < this.current_lineitem_count; i++){
var data = this.refs['lineitem_'+i].getAjaxData();
lineitem_data.push(data)
}
return lineitem_data;
},
getLineitems: function(){
var self = this;
var lineitem_components = [];
this.current_lineitem_count = 0;
if(this.props.shoot){
var preview = this.props.preview;
var lineitems = this.props.shoot.get_lineitems();
lineitem_components = lineitems.map(function (item, index) {
var ref_str = 'lineitem_'+self.current_lineitem_count;
self.current_lineitem_count++;
return (
<LineItemRow item={item} key={index} ref={ref_str} preview={preview} onChange={self.props.onChange} />
)
});
}
return lineitem_components;
},
render: function() {
var lineitems = this.getLineitems();
return (
<div>
{lineitems}
</div>
)
}
})
the first time lineitems are rendered the refs work like expected. But if I add a lineitem to this.props.shoot the refs object of this component does not change.
So for example say I had an array of 3 lineitems
[i1,i2,i3]
this.refs would be
{lineitem_0:{}, lineitem_1:{}, lineitem_2:{}}
and when I update my lineitem array to be
[i1,i2,i3,i4]
this.refs does not change, it will still be
{lineitem_0:{}, lineitem_1:{}, lineitem_2:{}}
why doesn't the refs object update between renders?
The LineItemRow components update properly so I know its not something wrong on that front. Any insights would be much appreciated!
____Edit____ (requested to add more code for context)
var DocumentContent = React.createClass({
contextTypes: {
router: React.PropTypes.func.isRequired
},
getParams: function(){
return this.context.router.getCurrentParams()
},
getInitialState: function() {
return {
shoot: ShootStore.get_shoot(this.getParams().shoot_id),
}
},
componentWillMount: function() {
ShootStore.bind( 'change', this.onStoreUpdate );
},
componentWillUnmount: function() {
ShootStore.unbind( 'change', this.onStoreUpdate );
},
onStoreUpdate: function(){
this.setState(this.getInitialState());
},
addLineItem: function() {
ShootActions.create_lineitem(this.state.shoot.id);
},
update_shoot_timeout: null,
update_shoot:function(){
var self = this;
window.clearTimeout(this.update_shoot_timeout)
this.update_shoot_timeout = window.setTimeout(function(){
var lineitem_data = self.refs.lineitems.getAjaxData()
if(self.props.shoot){
ShootActions.update_shoot(self.state.shoot.id, lineitem_data )
}
}, 500)
},
render: function() {
var shoot = this.state.shoot;
return (
<div className='document__content'>
<div className='row'>
<div className='document__expenses'>
<h3 className='lineitem__title'> Expenses </h3>
<LineItemRowsWrapper shoot={shoot} onChange={this.update_shoot} ref='lineitems'/>
</div>
<button onClick={this.addLineItem} className="btn-small btn-positive">
+ Add Expense
</button>
</div>
);
}
})
Under the section "Caution" in the react documentation about refs https://facebook.github.io/react/docs/more-about-refs.html
"Never access refs inside of any component's render method - or while
any component's render method is even running anywhere in the call
stack."
Which is exactly what you're doing.
Instead you should store state about the component in this.state or properties of the component in this.props
Remove all your refs and iteration to read the data.
The onchange handler you pass all the way down to the LineItem component should be called and passed only the data that changes. (The single LineItem data)
This is then handled back at the component with the state handling (DocumentContent).
Create an action ShootActions.updateLineItem() that updates the relevant line item in the store, which then emits the change and everything renders again.