Use to Dynamically Render Elements

Use to Dynamically Render Elements


Tell us what’s happening:
This code works as it should but I am still failing the test. I don’t understand why.

Your code so far

const textAreaStyles = {
  width: 235,
  margin: 5

class MyToDoList extends React.Component {
  constructor(props) {
    // change code below this line
this.state = {
  userInput: '',
  toDoList: []
    // change code above this line
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  handleSubmit() {
    const itemsArray = this.state.userInput.split(',');
      toDoList: itemsArray
  handleChange(e) {
  render() {
    const items ={
      return <li> {item} </li>;
    return (
          placeholder="Separate Items With Commas" /><br />
        <button onClick={this.handleSubmit}>Create List</button>
        <h1>My "To Do" List:</h1>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36.

Link to the challenge:

      return <li> {item} </li>;

For some reason, the spaces before and after {item} are confusing the test.


Why does this line not run into JavaScript error? i mean when we are writing js directly in render() before returning then shouldn’t js rules be applied as well hence instead of writing <li>{item}</li> shouldn’t we return a string "<li>{item}</li>". i think i have overlooked some concept here.


Because it’s not JS, it’s JSX. This:


is a combination of html and injected JS called JSX. React converts it to the necessary html and JS. It is being used in a JS environment, but it is not JS yet.

If we run this code:

class Test extends React.Component {
  render() {
    const value = 'howdy'
    const jsxElement = <p>{value}</p> 
    return (

We see this in the console:

{$$typeof: Symbol(react.element), type: “p”, key: null, ref: null, props: {…}, …}
$$typeof: Symbol(react.element)
key: null
props: {children: “howdy”}
ref: null
type: “p”
_owner: p {_currentElement: {…}, _rootNodeID: 0, _compositeType: 0, _instance: Test, _hostParent: null, …}
proto: Object

And if we inspect the DOM, we see

<div data-reactroot=""><p>howdy</p></div>

So we see that a transformation has taken place. That is what React is doing for us behind the scenes.

Try to remember that JSX is not HTML and and it is not JS. It looks like HTML with JS injected and React will do what is needed to convert it into something the browser can read.

We are used to putting JSX in the return of the render method but it can also be stored in variables, arrays, passed as parameters, etc.

Here is a pen with which you can see this.


Why can’t we use arrow function?
i.e instead of this:-

const items ={
      return <li> {item} </li>;


const items => {


You can use an arrow function, but because you wrote the { and the } after it, those curly brackets represent a code block. If you just want to return <li>{item}</li>, then you would write:

const items => <li>{item}</li>);


Thank You, Sir, I got it


you should add a return keyword in the curly brackets

const items = => {
     return <li>{item}</li>;