.map is not a function react 16

1

msgs is a JSON object from api, I’m getting thus error.

	msgs.map((mes, index) =>{

			console.log(msgs[mes])
						return (
							<div
								key={index}
								className={`message-container ${msgs[mes].sender === user.name && 'right'}`}
							>
								<div className="time">{msgs[mes].created_at}</div>
								<div className="data">
									<div className="message">{msgs[mes].body}</div>
									<div className="name">{msgs[mes].sender}</div>
								</div>
							</div> 
			)
		})
2

This can happen if the data type msgs is not an array. You said that this data is a JSON object from an API response. map is only available to arrays since it lives on the array prototype array.prototype.map. You cannot use map on an object.

You can use Object.keys to create an array out of the JSON object and then map over the keys to get the values out of an object.

Check the example in this StackOverflow answer.

Otherwise, I would suggest destructuring the values out of the JSON object or get the values out by using one of the builtin Object methods here.

If the messages in the object is an array then I would suggest assigning it to a variable and then mapping over the messages. That is a solution as well.

3

If you need both the keys and values I would recommend using Object.entries alongside array destructuring, like with the following:

Object.entries(msgs)
      .map([key, value] => {/* function body here */});

It doesn’t work in IE though, so if you need it there consider adding a polyfill