Add values in Semantic UI's Popup content

Question

I'm using this Popup and I want to send some values to its content attribute but it seems do not work.

This is the code:

          cellRender={value => (
            <Popup
              content="some content"
              on="click"
              pinned
              trigger={<div>{value}</div>}
            />
          )}

it works fine how it is now but I want to have some dynamic data in content.

Tried different methods like content=``this is the data: ${value} or content=value but doesn't work.

Is there a way to do it?

Answer 1

Did you remember to use curly braces when setting the content?

This component works fine for me. Give it a shot with your component. If it's still not working, please post a more complete example that demonstrates the problem.

import React from "react";
import { Popup } from "semantic-ui-react";

const MyComponent = () => {
  const value = "TEST";
  return (
    <Popup
      content={`This is the data: ${value}`}
      on="click"
      pinned
      trigger={<div>{value}</div>}
    />
  );
}

export default MyComponent;

If you're not familiar with this syntax, you can read more about JSX in the React Docs.