JSFiddle - React, Tailwind, and code Playground

by Eugen Sunic

HTML

<table>
   <tbody>
      
   </tbody>
</table>

CSS

table{
    border-collapse:collapse;
                background-color:black;
}
td{
    width:47.5px;
    height:47.5px;
    padding:0px;
    border:2.5px solid gray;
}
td.live{
    background-color:white;
}

JavaScript

const obj = {
  "content": [{
      "text": "#number# Tips to Get #goal#",
      "types": ["email"]
    },
    {
      "text": "Your Search For #goal# Ends Here",
      "types": ["ad", "email"]
    }
  ]
}


const parameters = {
  audience: 'audience1',
  goal: 'goal1',
  number: 'number1'
}

const listItems = obj.content.reduce((acc, x, i) => {
  const keys = Object.keys(parameters)
  keys.forEach(key => {
    x.text = x.text.replace(`#${key}#`, parameters[key])
    console.log(x.text)
  })
  acc.push(`<li key=${i}> ${x.text}</li>`);
  return acc;
}, []);


console.log(listItems)