Diego Oriani Diego Oriani - 1 year ago 100
React JSX Question

How to write React with the new syntax?

Basic question. I am trying to re-write my old

React Skeleton
project in the new way but I am having issues making it work. What am I doing wrong?

Old method

var React = require('react');
var ListItem = require('./ListItem.jsx')

//Component
var ingredients = [{ "id": 1, "text": "Ham"}, { "id": 2, "text": "Cheese"}, { "id": 3, "text": "Bread"},]

//Component
var List = React.createClass({
render: function() {
var listItems = ingredients.map(function(item) {
return <ListItem key = {item.id} ingredient = {item.text} />
});
return ( <ul>{listItems}</ul> );
}
});

module.exports = List;


New method

import React from 'react';
import ListItem from './ListItem.jsx';

const ingredients = [{ "id": 1, "text": "Ham"}, { "id": 2, "text": "Cheese"}, { "id": 3, "text": "Bread"}];

class List extends React.Component {

render() {
const listItems = ingredients.map((item) =>
<ListItem key = {item.id} ingredient = {item.text} />
);

return (
<ul>{listItems}</ul>
);
}
};


I am new to react so forgive me if my mistakes are basic. Thank you in advance.

Answer Source

A stateless component, as you've presented here, would not be written as a class. Instead, you are more likely to see it written as a functional component.

import React from 'react'

import ListItem from './ListItem'

const ingredients =
  [{ "id": 1, "text": "Ham"}, { "id": 2, "text": "Cheese"}, { "id": 3, "text": "Bread"}]

const List = props =>
  <ul>{ingredients.map (item =>
    <ListItem key={item.id} ingredient={item.text} />)}</ul>

export default List

Perhaps even more likely you are going to see data like ingredients passed as a property, instead of accessing a free variable like you have

Click Run code snippet below to see the demo code in action

const ingredients =
  [{ "id": 1, "text": "Ham"}, { "id": 2, "text": "Cheese"}, { "id": 3, "text": "Bread"}]

const List = props =>
  <ul>{props.ingredients.map (item =>
    <ListItem key={item.id} ingredient={item.text} />)}</ul>

const ListItem = props =>
  <li>{props.ingredient}</li>
  
ReactDOM.render(<List ingredients={ingredients} />, document.querySelector('#main'))
<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="main"></div>

Of course now List and ListItem can be made more generic. Why limit ourselves to using them only on ingredients?

const ingredients =
  [{ "id": 1, "text": "Ham"}, { "id": 2, "text": "Cheese"}, { "id": 3, "text": "Bread"}]

const List = ({items,each}) =>
  <ul>{items.map((item,key) =>
    <ListItem key={key} item={each(item)} />)}</ul>

const ListItem = ({item}) =>
  <li>{item}</li>
 
const Ingredient = ({text}) =>
  <div className="ingredient">{text}</div>
  
ReactDOM.render(<List items={ingredients} each={Ingredient} />, document.querySelector('#main'))
.ingredient {
  font-family: monospace;
  background-color: #333;
  color: #aaa;
  padding: 0.25rem;
}
<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="main"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download