How to render a string in reactjs

Question

I have an object with keys and values. I'd like to render a certain keys value in my react JSX markup like this:

const VALUES = {
  "key1": "value 1",
  "key2": "value 2",
}

const MyComponent = ({name}) => (
  VALUES[name] || ""  
)

but this does not work. While it is legal to render strings directly in JSX like this: <span>A string</span> the code above fails with an error saying "inst.render is not a function" in _renderValidatedComponentWithoutOwnerOrContext.

It works if the values look like this:

const VALUES = {
  "key1": <span>value 1</span>,
  "key2": <span>value 2</span>,
}

Dan · Accepted Answer · 2016-09-11 12:51:42Z

2

I'm going to go out on a limb and assume this is because const MyComponent has a signature of () => string and not () => ReactElement; This error is occuring because React is attempting to call .render() on the return value of your function and it can't find it, so it breaks.

Indeed, it would appear that render() on a component can only return ReactElement | null | false. Given that in a stateless component, the function itself is a render() function, it would logically follow that your component must have the signature () => ReactElement | null | false.

edited Sep 11, 2016 at 12:51

answered Sep 11, 2016 at 12:44

Dan

10.6k2 gold badges40 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

philk Over a year ago

ah could be yes. I thought because PropTypes.node could be a string too, it would be a valid render return.

Collectives™ on Stack Overflow

How to render a string in reactjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related