I'm looking to render some firebase data to the HomeFeed component. I update the state in the componentDidMount method. You can see what that looks like below. It's an array. Should I just map over that using the map function? How do I access the specific info like "title", "link", "type", etc. to be able to render it?
Thanks a lot!
var React = require('react');
var Rebase = require('re-base');
var base = Rebase.createClass("https://nimbus-8ea70.firebaseio.com/");
// TODO: Render Firebase data to screen.
// Home
// <Home />
var HomeContainer = React.createClass({
render : function() {
return (
<div className="homeContainer">
<HomeFeed />
</div>
);
}
});
// Home Feed
// <HomeFeed />
var HomeFeed = React.createClass({
componentDidMount: function() {
base.fetch('article', {
context: this,
asArray: true,
then(data){
console.log(data);
this.setState({
feed: data
})
}
});
},
getInitialState: function() {
return {
feed: []
}
},
render : function() {
return (
<div className="homeFeed">
{/* Use map function here? */}
</div>
);
}
});
module.exports = HomeContainer;
render will run whenever state has been changed (unless you modify this behavior with, say, shouldComponentUpdate) so as long as you use setState properly your component will automatically update when its state changes.
If you're asking specifically how to turn an array into something that render understands, then yes, map is a very common way to do that. It might look something like this:
render : function() {
return (
<div className="homeFeed">
{this.state.feed.map(function(ea){
return <div>{ea.someProperty}</div>
})}
</div>
);
}
Note that you have to wrap ea.someProperty in curly braces because you're basically inserting JSX inside of a JavaScript expression inside of even more JSX. This kind of nested JSX/Expression/JSX structure is something you'll have to get comfortable with in React I'm afraid.
More about array.map
Related
How can I have a global variable in a component that all the methods have access to it? I can't use the state because I have nested rendering and by changing the state of a variable I'm getting the warning that the render should be pure and don't use the setState inside render....! So I need to have a regular global variable accessible by all methods of the component and be able to change the value of it wherever is needed. Can anyone help me please?
P.S. Why I shouldn't change a state like this: this.state.variable = true;?
So here is my simplified code. this.setState({hidden: true}); will make the warning because this component is rendering inside another component. I need to make hidden to behave like a global variable and don't use the state!
const Component = React.createClass({
mixins: [React.addons.PureRenderMixin],
getInitialState: function() {
return {hidden: false};
},
renderFixedFields(.....) {
var request_link;
if (!this.state.hidden) {
request_link = <Link to={`/${record.get('id')}/request`}>Send Request </Link>
}
else {
request_link = null
}
return (
<div>
{request_link}
</div>
)
},
renderField(.....) {
var self = this;
//....
if (fieldID == "open_access") {
this.setState({hidden: true});
}
return (
//.....
);
},
renderFieldBlock(........) {
const [maj, min] = getMajMinFields(s);
//....
const minFields = min.entrySeq().map(
([id, f]) => this.renderField(fieldID, .....));
return (
//...
<div>
{ minorFields }
</div>
);
},
}
Setting state inside of render() is always going to be an issue as state changing will issue a render(). While the specific thing you are doing may not cause an issue, you should really be thinking about the lifecycle of your component and where that state really needs to change. If you need to change state based on new props then use componentWillReceiveProps:
componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}
Given the following, is it possible to access the parent context rather than the containers from a child (non-react component) element?
The example logs container, ideally it would log parent. I would like for Parent to be self contained, not to have it's state managed by its container.
var Container = React.createClass({
getInitialState: function () {
return {
context: 'container'
}
},
render: function () {
return (
<Parent>
<a href="#" onClick={function () {console.log(this.state.context);}.bind(this)}>click me</a>
</Parent>
);
}
});
var Parent= React.createClass({
getInitialState: function () {
return {
context: 'parent'
}
},
render: function () {
return (
<div>
{this.props.children}
</div>
);
}
});
If there is another pattern for handling this, please share as well.
Note: To be clear, I understand how the this keyword works and why the above example works as it does. The example is simply meant to illustrate the problem.
You can import some React helpers for that:
var React = require('react')
...
var children = React.Children.map(this.props.children, child => {
return React.cloneElement(child, {
context: this.state.context
})
})
render() {
return <div>{ children }</div>
}
...
Then your child component will have this.props.context which will be the string 'parent', but this must be a React component, as this needs to refer to the component using the parent prop
var YourComponent = React.createClass({
render() {
return (
<a href="#" onClick={() => console.log(this.props.context)}>
click me
</a>
)
}
})
------
var Parent = require('./Parent')
var YourComponent = require('./YourComponent')
...
render() {
return <Parent><YourComponent /></Parent>
}
I do not know about the first part of your question, but since you commented about dynamically creating components, here's how I do it:
You can set a state variable in the constructor of the class and its parent:
if (typeof this.state == 'undefined') {
this.state = {
componentsToRender: <div></div>
};
}
Then in the parent component, in the componentDidMount() function:
var componentsToRender = [];
if ([conditional]) {
// some logic so you know which component to render
componentsToRender.push(<customChildComponentToRender key={} />);
}
else {
componentsToRender.push(<otherComponentToRender key={} />);
}
this.setState({
componentsToRender: <div>{componentsToRender}</div>
});
Make sure to put a key (lines 4 and 7 of the second code block) or React will scream at you.
In response to your initial question, I would watch this video from the ReactJS Conference 2015 to get more of the heart behind a container. After hearing what the guys at Facebook say (who have radical views on containers!), you might want to rethink the design to make your container more of a data layer.
I would check out THIS article from the react website. I think it might give you some intuition on solving your problem.
As a general rule of thumb, I try and only use this.state to handle internal UI state of a specific component. Everything else is passed via props. If you're needing the full context of a component, I would either pass it as a prop or checkout something like flux or redux which will help you manage state between components.
Say I have an app with some path app -> taskbar -> button -> modal -> textfield. I want the textfield to be some setting a user inputs and is used elsewhere in the app, maybe app -> differentButton -> differentModal displays this user setting for example
I'm brand new to react, but it seems data can only go downwards through props, right? Is it expected that I store this state externally in a db? I don't mind doing that, but it seems like there should be an easy way to do this that I'm overlooking?
You can store the state in the parent component and pass not only the value, but also the function that modifies the value to the child. Eg:
const App = React.createClass({
getInitialState () {
return {
name: 'Dave'
};
},
render () {
return (
<div>
<MyComponent name={this.state.name} changeName={this.onChangeName} />
</div>
)
},
onChangeName (name) {
this.setState({ name });
}
});
const MyComponent = React.createClass({
propTypes: {
name: React.PropTypes.string,
changeName: React.PropTypes.func.isRequired
},
render () {
return (
<div>
<input value={this.props.name} onChange={this.props.changeName} />
</div>
);
}
});
The canonical way would be to pass a callback function from a component which is higher up in the view hierarchy through props.
That higher ordered component would encapsulate the state that you wish to modify, triggering a re-render of the sub-tree.
In your case, it looks like you would have to use App as the shared parent component for sharing state. So in App, you'd probably have a function such as:
handleTextInput: function(text) {
// handle the text input here (set some state, make an ajax call, etc)
},
And App's render function might look like this:
render: function() {
return (
<TaskBar onTextSubmit={this.handleTextInput} />
);
}
In your TaskBar component, you'd pass the callback down to Button, and so on.
Finally, in your modal component, you'd have a render function like:
render: function() {
return (
<form onSubmit={this.props.onTextSubmit}>
...
</form>
);
}
Of course, this is can quickly get quite clumsy if you have a deeply nested hierarchy, so a better approach would be to use a library for state management such as Redux.
I understand the question is not clear, so the description will help.
So, I have some react components like,
var LandingPage = React.createClass({
render: function() {
return <div>
This is the landing page.
</div>
}
})
and another component like
var FirstContent = React.createClass({
render: function() {
return <div>
This is first content page
</div>
}
})
Now I have a controller where I decide which one I need to render by passing a value in props, something like this -
var Contoller = React.createClass({
render: function() {
var inside = "";
if (this.props.pageName == "LandingPage") {
inside = <LandingPage />;
} else if (this.props.pageName == "FirstContent") {
inside = <FirstContent />;
}
return <div>
{inside}
</div>;
}
})
Now instead, I want to do something like, use the this.props.pageName inside the tag directly, so that I don't have to write if else for every time ad some new alternate content. Should be something like this -
var Contoller = React.createClass({
render: function() {
return <div>
<"this.props.pageName" /> //comment - <LandingPage /> if this.props.pageName = "LandingPage"
</div>;
}
})
The map of pageName to actual Component has to exist somewhere, because other than the default HTML elements (like div) React needs the class object reference to render a component. A string wont do.
How you manage this map is up to you, but I've used an object below.
Further complicating this is the JSX compilation step, which doesn't work with dynamic content. You will have to use the actual JS calls in your Controller to get this working.
Here is a codepen demonstrating this.
class LandingPage extends React.Component {
render() {
return <div> This is the landing page. </div>;
}
}
class FirstContent extends React.Component {
render() {
return <div> This is the first content page. </div>;
}
}
const map = {
LandingPage: LandingPage,
FirstContent: FirstContent
};
class Controller extends React.Component {
render() {
return React.createElement(map[this.props.pageName]);
}
}
React.render(<Controller pageName={'LandingPage'} />, document.body);
All that being said, I think you are building a router. You can use react-router in memory mode to perform routing without using the URL. Rolling your own setup here may be more work than it's worth.
The map does exist in the example by Tyrsius: you can use window[this.props.pageName]. Though it's better not to expose your components to the window object. And it may not work at all if you're using CommonJS for your React components.
If you don't need to build a name of several parts, why don't you just pass the component itself instead of a string? Either as a property or, better, as a child:
class Controller extends React.Component {
render() {
return <div>{this.props.children}</div>;
}
}
React.render(<Controller><FirstContent/></Controller>, document.body);
I have a component that has several nested components, specifically tabs, pills, etc. No all are visible at any one time.
I want to be able to set their default state/props based on the URL parameters (or URL) but I'm not clear how to achieve this in React.
For example, I have a component with two tabs (bootstrap). When the user selects the second tab, can i modify the URL with a parameter so that is the page is refreshed, the state of the currently selected tab is retained.
I've included the Router but cannot find any simple examples of what I'm trying to achieve.
What I'd like to be able to do is access/parse the query string parameters and set the state and ultimately properties of the child components.
Any advice is really welcome.
I can provide example of the tab component, but don't think it would add any value to the question.
The way I've gone about this it to take advantage of React contexts. It's an undocumented but powerful feature that kind of acts like mutable props that can be accessed by a component and all its children.
I suggest Googling about it. It's a bit tough to wrap your mind around, but starts to make sense once you play with it. Here is an example excerpt from some code I am working on right now:
var React = require('react');
var Router = require('react-router'),
Route = Router.Route,
RouteHandler = Router.RouteHandler;
var ReactBootstrap = require('react-bootstrap'),
DropdownButton = ReactBootstrap.DropdownButton,
Nav = ReactBootstrap.Nav,
Navbar = ReactBootstrap.Navbar;
var ReactRouterBootstrap = require('react-router-bootstrap'),
MenuItemLink = ReactRouterBootstrap.MenuItemLink;
var Nav = React.createClass({
render: function() {
return (
<Navbar brand='My Cool Page!' inverse toggleNavKey={0}>
<Nav right eventKey={0}> {}
<DropdownButton eventKey={2} title='Projects'>
<MenuItemLink eventKey="1" to="myCoolPage" params={{ awesomeName: "matt" }}>Go to My Cool Page!</MenuItemLink>
</DropdownButton>
</Nav>
</Navbar>
);
}
);
var MyCoolPage = React.createClass({
contextTypes: {
router: React.PropTypes.func
},
getInitialState: function() {
return {
awesomeName: ''
};
},
componentWillMount: function() {
// Called once before the first render
this.getAwesomeName();
},
componentWillReceiveProps: function(nextProps) {
// Called when props change after the first render
// From my testing, this is also called when a context changes
this.getAwesomeName();
},
getAwesomeName: function() {
var { router } = this.context;
var awesomeName = router.getCurrentParams().awesomeName;
this.setState({awesomeName: awesomeName});
},
render: function() {
return (
<h1>My awesome name is: {this.state.awesomeName}</h1>
);
}
});
var App = React.createClass({
render: function() {
return (
<div>
<Nav />
<RouteHandler {...props} />
</div>
);
}
});
var routes = (
<Route handler={App}>
<Route name="myCoolPage" path="myCoolPage/:awesomeName" handler={MyCoolPage} />
</Route>
);
Router.run(routes, Router.HashLocation, function (Root) {
React.render(<Root/>, document.body);
});