CODEWITHSUNDEEP
javascriptreactjs
Sam B.
Sam B.

Reputation: 3033

ReactJS populating into multiple div's instead of li

Writing my first ReactJS App and what I need it to do is create a couple of div's with some dummy content which I will later update with real fetches from the site.

So far this is the code I've written to accomplish this.

class Joke extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      jokes: [],
    };
  }

  render() {
    //test content
    let jokes = ['first joke', 'second joke', 'third joke'];

    const jokes_div = jokes.map((joke) => {
        return (
            <div className="card col-md-7">
              <div className="card-body">
                 {joke}
              </div>
            </div>
        );
    });

    return (
        <div className="main-card-body">
            {jokes_div}
        </div>
        
    );
  }
}

// ========================================

ReactDOM.render(
  <Joke />,
  document.getElementById('jokes')
);

On the html there's a div with an id of jokes, problem is once ReactJS loads it throws multiple errors till the page stops responding.

Error Message

ReferenceError: errors is not defined[Learn More]  main-script.js:21:3
    window.onerror http://35.196.142.180/static/js/main-script.js:21:3
    invokeGuardedCallbackDev http://35.196.142.180/static/js/react-dom.development.js:178:7
    ReactErrorUtils.invokeGuardedCallback http://35.196.142.180/static/js/react-dom.development.js:227:5
    commitRoot http://35.196.142.180/static/js/react-dom.development.js:16181:7
    completeRoot http://35.196.142.180/static/js/react-dom.development.js:17196:34
    performWorkOnRoot http://35.196.142.180/static/js/react-dom.development.js:17141:9
    performWork http://35.196.142.180/static/js/react-dom.development.js:17060:7
    performSyncWork http://35.196.142.180/static/js/react-dom.development.js:17032:3
    requestWork http://35.196.142.180/static/js/react-dom.development.js:16932:5
    scheduleWork$1 http://35.196.142.180/static/js/react-dom.development.js:16796:11
    scheduleRootUpdate http://35.196.142.180/static/js/react-dom.development.js:17363:3
    updateContainerAtExpirationTime http://35.196.142.180/static/js/react-dom.development.js:17390:10
    updateContainer http://35.196.142.180/static/js/react-dom.development.js:17417:10
    ReactRoot.prototype.render http://35.196.142.180/static/js/react-dom.development.js:17700:3
    legacyRenderSubtreeIntoContainer/< http://35.196.142.180/static/js/react-dom.development.js:17840:9
    unbatchedUpdates http://35.196.142.180/static/js/react-dom.development.js:17257:10
    legacyRenderSubtreeIntoContainer http://35.196.142.180/static/js/react-dom.development.js:17836:5
    ReactDOM.render http://35.196.142.180/static/js/react-dom.development.js:17895:12
    <anonymous> http://35.196.142.180/:56:1
    n http://35.196.142.180/static/js/babel.min.js:12:27047
    r http://35.196.142.180/static/js/babel.min.js:12:27558
    o/</< http://35.196.142.180/static/js/babel.min.js:12:27873
    s/i.onreadystatechange http://35.196.142.180/static/js/babel.min.js:12:27316

Upvotes: 0

Views: 1853

Answers (1)

Szymon Pancerz
Szymon Pancerz

Reputation: 237

First of all there's no needs to call constructor nowadays. Here you got nice article about that https://hackernoon.com/the-constructor-is-dead-long-live-the-constructor-c10871bea599

The code looks okay, but there's no 'key' property in the outer div in the list. You need to inlude this, because react throws an errors. This needs to be unique value like for example index of the element. https://reactjs.org/docs/lists-and-keys.html

I've prepared working example here, so you can compare It to your code. https://codesandbox.io/s/llonl9qp3q

the core looks like this: 

 class App extends Component {
  render() {
    const jokes = ["first", "second", "third"];
    const jokes_div = jokes.map((item, i) => (
      <div key={i}>
        <p>{item}</p>
      </div>
    ));
    return <div className="App">{jokes_div}</div>;
  }
}

You can also improve that a little bit and call it inside the return: 

 class App extends Component {
  render() {
    const jokes = ["first", "second", "third"];
    return (
      <div className="App">
        {jokes.map((item, i) => (
          <div key={i}>
            <p>{item}</p>
          </div>
        ))}
      </div>
    );
  }
}

Upvotes: 1

Related Questions