Can I add a key prop to a React fragment?
To add a key to a fragment you need to use full Fragment syntax: <React.Fragment key={your key}> … </React.Fragment> See docs here https://reactjs.org/docs/fragments.html#keyed-fragments
jsx
Dynamic tag name in React JSX
No way to do that in-place, just put it in a variable (with first letter capitalised): const CustomTag = `h${this.props.level}`; <CustomTag>Hello</CustomTag>
How to render HTML string as real HTML?
Is this.props.match.description a string or an object? If it’s a string, it should be converted to HTML just fine. Example: class App extends React.Component { constructor() { super(); this.state = { description: ‘<h1 style=”color:red;”>something</h1>’ } } render() { return ( <div dangerouslySetInnerHTML={{ __html: this.state.description }} /> ); } } ReactDOM.render(<App />, document.getElementById(‘root’)); Result: http://codepen.io/ilanus/pen/QKgoLA?editors=1011 However … Read more
Cannot use JSX unless the ‘–jsx’ flag is provided
Every time I run npm start, it overrides whatever I configure in {jsx: …} with react-jsx in order to be compatible with JSX transform in React 17. The following changes are being made to your tsconfig.json file: – compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17) The problem is VSCode … Read more
ReactJs: What should the PropTypes be for this.props.children?
Try something like this utilizing oneOfType or PropTypes.node import PropTypes from ‘prop-types’ … static propTypes = { children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node ]).isRequired } or static propTypes = { children: PropTypes.node.isRequired, }
How to use componentWillMount() in React Hooks?
You cannot use any of the existing lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount etc.) in a hook. They can only be used in class components. And with Hooks you can only use in functional components. The line below comes from the React doc: If you’re familiar with React class lifecycle methods, you can think of useEffect … Read more
ReactJS – .JS vs .JSX
There is none when it comes to file extensions. Your bundler/transpiler/whatever takes care of resolving what type of file contents there is. There are however some other considerations when deciding what to put into a .js or a .jsx file type. Since JSX isn’t standard JavaScript one could argue that anything that is not “plain” … Read more
TypeScript and React – children type?
Just children: React.ReactNode.
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
In my case (using Webpack) it was the difference between: import {MyComponent} from ‘../components/xyz.js’; vs import MyComponent from ‘../components/xyz.js’; The second one works while the first is causing the error. Or the opposite.
Loop inside React JSX
Think of it like you’re just calling JavaScript functions. You can’t use a for loop where the arguments to a function call would go: return tbody( for (let i = 0; i < numrows; i++) { ObjectRow() } ) See how the function tbody is being passed a for loop as an argument – leading … Read more