Generate Div for Every Message in Array in React App

Learn how to build a message board or chat room kind of app in the JavaScript programming language using the React library for the frontend.

In this lesson we start building the list of messages using the dynamic generation of div elements according to an array of strings that contain each message content.

The lesson returns a JSX template (that looks like HTML) from a React function component that displays a box container with chat messages.

You assign a class attribute to an element in React by defining the prop className.

You can make an array — a sequence of things, in this case of strings — to hold the value of each message. Then you use the Array.prototype.map function to make a div for each string.

Interpolation in JSX can be performed by surrounding the name of a variable with curly braces. Otherwise, without curly braces, the literal characters that compose the variable name are shown.