I think there may have been some confusion as to what I was trying to achieve. I managed to solve the issue I was having and have shown my code below which shows how I solved it. Separate File (ComponentIndex.js): let Components = {}; Components[‘Component1’] = require(‘./Component1’).default; Components[‘Component2’] = require(‘./Component2’).default; Components[‘Component3’] = require(‘./Component3’).default; export default … Read more
You can do it like this: import { withStyles } from “@material-ui/core/styles”; const styles = theme => ({ root: { backgroundColor: “red” } }); class ClassComponent extends Component { state = { searchNodes: “” }; render() { const { classes } = this.props; return ( <div className={classes.root}>Hello!</div> ); } } export default withStyles(styles, { withTheme: … Read more
EDIT: Updated to reflect React 16 Custom attributes are supported natively in React 16. This means that adding a custom attribute to an element is now as simple as adding it to a render function, like so: render() { return ( <div custom-attribute=”some-value” /> ); } For more: https://reactjs.org/blog/2017/09/26/react-v16.0.html#support-for-custom-dom-attributes https://facebook.github.io/react/blog/2017/09/08/dom-attributes-in-react-16.html Previous answer (React 15 and … Read more
In index.js change <React.StrictMode><App /><React.StrictMode> to <App /> and you will not see this warning. Please note that strict mode helps you with Identifying components with unsafe lifecycles Warning about legacy string ref API usage Warning about deprecated findDOMNode usage Detecting unexpected side effects Detecting legacy context API Please refer to https://reactjs.org/docs/strict-mode.html before removing it.
This relates to stateful DOM components (form elements) and the React docs explain the difference: A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component “controls” it by handling the callback and managing its own state and passing the new values as props … Read more