I need help with use in all the cases info.info but when this is email use this: <a href={'mailto:${info_info}' now give me a error:

/App.js: Missing semicolon. (103:44)

<tbody>
    {additional_info_game.map(info => {
        var is_email=validator.isEmail(info.info);
        var info_temp ="N.A";
        if(is_email) {info_temp= '<a href={'mailto:${info_info}'}> ' info_info ' </a>'} else {info_temp=info.info};
        return (
        <tr key={info.id}><td>{info.label}</td><td>{info_temp}</td></tr>
        )
    })}
</tbody>

Pls your guide what is my mistake here ? This is the error I am seeing in VS Code

CodePudding user response：

I cannot actually say for certain what the exact problem is, but for what I can see is that the info_temp= '<a href={'mailto:${info_info}'}> ' info_info ' ' might be the problem.

I would suggest you trying out the following example:

<tbody>
    {additional_info_game.map(info => {
        var is_email = validator.isEmail(info.info);
        var info_temp = info.info;

        if(is_email) 
            info_temp = <a href={`mailto:${info.info}`}>{info.info}</a>;

        return (
            <tr key={info.id}><td>{info.label}</td><td>{info_temp}</td></tr>
        )
    })}
</tbody>

CodePudding user response：

Hello and welcome to StackOverflow!

I hope I can help you. Let's see. I think you having a hard time in JSX. If I may suggest, try this:

<tbody>
  {additional_info_game.map((info) => {
    let is_email = validator.isEmail(info.info);
    let info_temp = "N.A";
    if (is_email) {
      info_temp = <a href={`mailto:${info.info}`}>{info.info}</a>;
    } else {
      info_temp = info.info;
    }
    return (
      <tr key={info.id}>
        <td>{info.label}</td>
        <td>{info_temp}</td>
      </tr>
    );
  })}
</tbody>;

To improve your understanding of JSX, you can learn from here https://www.w3schools.com/react/react_jsx.asp or read other person's code.

Have a great day!