question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow passing React elements to certain props

See original GitHub issue

I noticed that the message prop on <Input /> only accepts a string. I’m sure there are other places where this is the case as well. I think it would be much more flexible if these instances could take React elements as well as strings.

Would you be in favor of easing up the PropTypes checks to allow passing React elements to these props?

This is important in particular for react-intl, where the idiomatic way of using translated messages is via the <FormattedMessage /> component:

<Input
  type='text'
  message={
    <FormattedMessage
      id='error'
      defaultMessage={`Whoops, that's an error.`}
      />
  }
  />

It can also be used for composing styles:

<Input
  type='text'
  message={
    <strong>
      This field is required.
    </strong>
  }
  />

In fact, both of these use-cases work currently, but React complains about the PropTypes checks in development.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
jxnblkcommented, Jul 5, 2017

The API has significantly changed in v1, where this shouldn’t be an issue anymore

0reactions
maxdeviantcommented, Jul 6, 2017

@jxnblk v1 looks great, btw 🎉

Read more comments on GitHub >

github_iconTop Results From Across the Web

Pass react component as props - Stack Overflow
I want the pass property to look like. Above just prints out the Statement function. $$typeof:Symbol(react.element) _owner: ...
Read more >
Pass a Component as props in React | bobbyhadz
You can pass a component as props in React by using the built-in children prop. All elements you pass between the opening and...
Read more >
Passing Elements as Props in React | by David Barral - Medium
In this story we are going to see a simple technique that allows you to write friendly customizable components with simple APIs, just...
Read more >
React component as prop: the right way™️
Exploring how to pass React components as props, why we would want to do it, and what is the best pattern for the...
Read more >
Passing Props to a Component - React Docs
React components use props to communicate with each other. Every parent component can pass some information to its child components by giving them...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found