1

Here I have stored attribute tag in string which is in an object of an array, here I am rendering it using map function, but it is not converting it back from string to an attribute.

Please tell me how can I achieve this.

Here is the render part of my code.

return (
  <div className="gm panel panel-default table-responsive">
    <table className="displayresults">
      <thead>
        <tr>
          <th width="200"></th>
          {dates.map((date, index) => {
            return (
              <th width="100">
                <div className="dt">{date}</div>
              </th>
            );
          })}
        </tr>
      </thead>

      <tbody>
        {row.map((info, index) => {
          return (
            <tr>
              <td>
                <div className="up">{info.name}</div>
                <div className="down">
                  {info.address}, {info.district_name}, {info.state_name},{" "}
                  {info.pincode}
                </div>
              </td>
              <td>{info.dt1}</td>
              <td>{info.dt2}</td>
              <td>{info.dt3}</td>
              <td>{info.dt4}</td>
              <td>{info.dt5}</td>
              <td>{info.dt6}</td>
              <td>{info.dt7}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  </div>
);

Here info.dt1, info.dt2 ..... is a string. How can I print it as an attribute here so that my code renders perfectly? I am also providing output, for better a better understanding, below.

Here is the output photo please help me

Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
Mayank Kumar Singh
  • 13
  • 4

1 Answers1

0

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous.

<td dangerouslySetInnerHTML={{__html: info.dt1}}/>
...
Coloured Panda
  • 3,293
  • 3
  • 20
  • 30