I am using the map function to iterate over an array with images. I am then trying to display these images on the page.
You will see that the images are being concatenated into one stain. Does anyone know how to do this so i can show each individual image?
I have set up a jsfiddle here
Please see React code below:
var App = React.createClass({
render: function(){
var images = [
{
id:"1",
images:['https://i.scdn.co/image/dc284fcd7e581aa2b7ca56f28c7c74f0ca0ad393', 'https://i.scdn.co/image/97ffc63dd5abfe7203d8f5e90d1a74427ac756e7']
},
{
id:"2",
images:['https://i.scdn.co/image/97ffc63dd5abfe7203d8f5e90d1a74427ac756e7', 'https://i.scdn.co/image/97ffc63dd5abfe7203d8f5e90d1a74427ac756e7']
}
];
return(<List images={images} />)
}
});
var List = React.createClass({
render: function() {
var images = this.props.images.map(function(image){
return(image.images[0]); // updated here
})
return(
<div>
<img src={images}></img>
<p>{images}</p>
</div>
)
}
});
ReactDOM.render(
<App name="World" />,
document.getElementById('container')
);
Does the following work? https://jsfiddle.net/petebere/19fmn5qs/
The change was to add the <img /> tag with the src attribute set to the url:
var images = this.props.images.map(function(image, index){
return <img key={index} src={(image.images[0])} />;
});
Also, you now don't need the <img /> tag in your final return statement. Please see my updated fiddle. I've also added the key attribute as required in the React docs: https://facebook.github.io/react/docs/multiple-components.html#dynamic-children
Full code:
var App = React.createClass({
render: function() {
var images = [
{
id:"1",
images:['https://i.scdn.co/image/dc284fcd7e581aa2b7ca56f28c7c74f0ca0ad393', 'https://i.scdn.co/image/97ffc63dd5abfe7203d8f5e90d1a74427ac756e7']
},
{
id:"2",
images:['https://i.scdn.co/image/97ffc63dd5abfe7203d8f5e90d1a74427ac756e7', 'https://i.scdn.co/image/97ffc63dd5abfe7203d8f5e90d1a74427ac756e7']
}
];
return(<List images={images} />);
}
});
var List = React.createClass({
render: function() {
var images = this.props.images.map(function(image, index){
return <img key={index} src={(image.images[0])} />;
});
return(
<div>
<p>Your images</p>
{images}
</div>
);
}
});
ReactDOM.render(
<App name="World" />,
document.getElementById('container')
);
Related
I have an array of objects.
notifications = [
{notification:"this is notification1"},
{notification:"this is notification2"},
{notification:"this is notification3"},
]
Ive been trying to map through the array and create HTML code out of it.
return (
<div>
{notifications.map(function(notificationItem) {
<a> {notificationItem.notification} </a>
})}
</div>
);
Can somebody please tell me what is the mistake in this?
Thank you!
From .map you should return value - add return statement to .map., also in this case you should add key property for each element., because child elements should have unique keys., you can read more about reconciliation here
var App = React.createClass({
render: function() {
const notifications = this.props.notifications
.map(function(notificationItem, index) {
return <a key={index}> {notificationItem.notification} </a>;
});
return <div>{ notifications }</div>;
}
});
var notifications = [
{notification:"this is notification1"},
{notification:"this is notification2"},
{notification:"this is notification3"},
];
ReactDOM.render(
<App notifications={ notifications } />,
document.getElementById('container')
);
<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="container"></div>
I'd also add that if you don't need stateful React, you could also write your component in this style:
const notifications = [
{ notification: "1" },
{ notification: "2" },
{ notification: "3" },
];
const App = function({ notifications }) {
return (
<div>
{
notifications.map((item, index) => <a key={index}>{item.notification}</a>)
}
</div>
)
}
ReactDOM.render(
<App notifications={ notifications } />,
document.getElementById("app")
)
So I am learning react.js, and I am developing a quick search engine using the GitHub API of users.
The API side of the project works fine (I have tested by manually entering names into the area)
Its the search build in react that is not working.
(FYI: I am using Plunker which has react support)
script.jsx
var Card = React.createClass({
getInitialState: function(){
return{};
},
componentDidMount: function(){
var component = this;
$.get("https://api.github.com/users/" + this.props.login, function(data){
component.setState(data);
});
},
render: function(){
return(
<div>
<img src={this.state.avatar_url} width="100"/>
<h3>{this.state.name}</h3>
<hr/>
</div>
);
}
});
var Form = React.createClass({
handleSubmit: function(e){
e.preventDefault();
var loginInput = React.findDOMNode(this.refs.login);
this.props.addCard(loginInput.value);
loginInput.value = '';
},
render: function(){
return(
<form onSubmit={this.handleSubmit}>
<input placeholder="Enter Github Name" ref="login"/>
<button>Search</button>
</form>
);
}
});
var Main = React.createClass({
getInitialState: function(){
return {logins: []};
},
addCard: function(loginToAdd){
this.setState({logins: this.state.logins.concat(loginToAdd)});
},
render: function() {
var cards = this.state.logins.map(function(login){
return (<Card login={login} />);
});
return(
<div>
<Form addCard={this.addCard} />
{cards}
</div>
)
}
});
ReactDOM.render(<Main />, document.getElementById("root"));
The problem was (if you check console), that you had a duplicate script tag in the <head> which you didn't need. And also, you were doing React.findDOMNode instead of ReactDOM.findDOMNode
Line 25 of your JSX file:
var loginInput = ReactDOM.findDOMNode(this.refs.login);
That said, you don't need to do ReactDOM.findDOMNode. You can just use this.refs.login
Here, i have included a my example code. If it is one dimensional array means, i can easily insert json data's into my code. How to achieve this one with multidimensional json data with react js?
var Category = React.createClass({
render: function() {
return (
<div>
{this.props.data.map(function(el,i) {
return <div key={i}>
<div>
{el.product}
</div>
<div>
{el.quantity}
</div>
</div>;
})}
</div>
);
}
});
var data = [
{
product:"a",
quantity:28,
sub:[
{
subItem:'a'
},
{
subItem:'b'
}
]
},
{
product:"b",
quantity:20,
sub:[
{
subItem:'a'
},
{
subItem:'b'
}
]
}
];
React.render(<Category data={data}/>, document.body);
You can create component for sub categories like this,
var SubCategory = React.createClass({
render: function () {
var list = this.props.data.map(function(el, i) {
return <li key={i}>{ el.subItem }</li>;
});
return <ul>{ list }</ul>;
}
});
and use it in Category component
{this.props.data.map(function(el,i) {
return <div key={i}>
<div>{el.product}</div>
<div>{el.quantity}</div>
<SubCategory data={ el.sub } />
</div>;
})}
Example
Using npm-inline-css module, I'm trying to change certain page elements colors, when storing the styles in a state. I set the state here:
setHeaderStyle: function(data){
var headerStyles = this.state.defaultStyles;
if(data) {
headerStyles.backgroundColor = data.first_colour;
headerStyles.color = data.theme;
}
this.setState({
branding: data,
headerStyles: headerStyles
});
},
Then I'm trying to apply the styles to the component:
render: function (){
return (
<div className="our-schools-app">
<InlineCss stylesheet="
& .button {
color: {{this.state.color}};
}
" />
<RouteHandler />
</div>
);
}
But they output like below. How can I set the inline styles? Or a better way I can do this?
<style scoped="" data-reactid=".0.0.1">#InlineCss-0 .button { color: {{this.state.color
}
}
;
}
</style>
From React Docs:
In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string.
It looks like you're most likely trying to set styles for a button that exists in components that are rendered in RouteHandler.
If that's the case, it would make the most sense for you to create a wrapper that wraps the other components and accepts the styles you're trying to set.
For example:
var PageWrapper = React.createClass({
setHeaderStyle: function(data){
var headerStyles = this.state.defaultStyles;
if(data) {
headerStyles.backgroundColor = data.first_colour;
headerStyles.color = data.theme;
}
this.setState({
branding: data,
headerStyles: headerStyles
});
},
render: function () {
var buttonStyle = {
color: this.state.color
}
return (
<RouteHandler buttonStyle={buttonStyle} />
);
}
});
var Index = React.createClass({
render: function () {
return (
<div>
<RouteHandler />
</div>
);
}
});
var Signup = React.createClass({
render: function() {
return (
<div>
<p> Click below to signup now! </p>
<button style={this.props.buttonStyle}>Click Me!</button>
</div>
);
}
});
var Contact = React.createClass({
render: function() {
return (
<div>
<p> Click the button below to contact us </p>
<button style={this.props.buttonStyle}>Email Us!</button>
</div>
);
}
});
var routes = (
<Route path="/" handler={Index}>
<Route path="page" handler={PageWrapper}>
<Route path="signup" handler={Signup} />
<Route path="contact" handler={Contact} />
</Route>
</Route>
);
ReactRouter.run(routes, function (Handler) {
React.render(<Handler/>, document.body);
});
Edit: Per your request, as an example to show how nested routes would work, I added a Signup and Contact component. If you look at the routes variable you can see how I nested these components under PageWrapper.
Now the nested routes /#/page/signup and /#/page/contact will both get access to the props that are added to the <RouteHandler /> of PageWrapper. Hope this helps!!!!!
I'm trying to learn react for my first javascript project and as a start creating a very simple code that adds two numbers entered in a text box. The result is re-rendered as a number is typed. This worked for me on react v0.11.
var App = React.createClass({
mixins: [React.addons.LinkedStateMixin],
getInitialState: function() {
return {
payment: 0,
payment2: 0
};
},
render: function() {
var total = parseInt(this.state.payment, 10) +
parseInt(this.state.payment2, 10);
return (
<div>
<Payment {...this.props} valueLink={this.linkState('payment')}/><span>+</span>
<Payment {...this.props} valueLink={this.linkState('payment2')}/><span>=</span>
{ total }
</div>
);
}
});
var Payment = React.createClass({
render: function() {
return this.transferPropsTo(
<input type="text" />
);
}
});
React.render(
<App />,
document.getElementById('app')
);
However, it seems like the transferPropsTo() function was removed in v0.13. How do I do the equivalent in the latest version.
You can pass {...this.props} in the input tag:
var Payment = React.createClass({
render: function() {
return (
<input type="text" {...this.props} />
);
}
});
This uses the JSX spread attributes feature.