Concat all values of a key from array of json object in react

November 28, 2023

Below is the JSON structure.

[
  {
    "severity": 1,
    "message": "msg1"
  },
  {
    "severity": 2,
    "message": "msg2"
  }
]

This is the response i’m getting from backend API and I have to concatenate all messages in this array and display on the UI using ReactJs.

So, final output here would be "msg1,msg2".

I can iterate over this array and then concatenate the strings, but is there a way in which we can concatenate with in-build function.

>Solution :

This is how to build it as a component in React:

import React from 'react';

const YourComponent = ({ data }) => {
  // Assuming 'data' is your array of JSON objects
  const concatenatedMessages = data.map(item => item.message).join(',');

  return (
    <div>
      {/* Display the concatenated messages */}
      <p>{concatenatedMessages}</p>
    </div>
  );
};

export default YourComponent;

Also you can use the useState and useEffect hooks if you want.