How to go from parent to child and from child back to parent component in React.js

Question

I want to create the next thread using js js. I have a list of products, and when I click on the list, I want to redirect to a single product form. If I click the delete button in this form, the product will be deleted from the database and the list will be displayed. I have a component <List /> and <Product /> . I also use Browserify.

In render function <List /> I have

 if (this.state.productId) { return <Product productId={this.state.productId}/> } else { return ( <Table datas = {data} changeCallback={this._goToProduct} /> ) } 

<Table /> is another component that displays a table with data and onClick in a row, returns the identifier for this product, and the <List /> component has a goToProduct function that sets the state value for productId .

In <Product /> product information is displayed on the form, and there is a delete button. Here I tried to turn on the <List /> component with Browserify to do something similar, if I remove the product, set some state and render <List /> .

 function deleteProduct (){ //do stuff for delete return <List /> } 

If I access directly <Product /> for a new product, everything is perfect and it works, but if I try to click on the list and go to <Product /> , I get this in the console:

 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `exports`. react.js:20250 warning @ react.js:20728 ReactElementValidator.createElement @ react.js:9853 t.exports.React.createClass.render @ bundle.js:1ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext @ react.js:6330 ReactCompositeComponentMixin._renderValidatedComponent @ react.js:6350 wrapper @ react.js:12868 ReactCompositeComponentMixin._updateRenderedComponent @ react.js:6303 ReactCompositeComponentMixin._performComponentUpdate @ react.js:6287 ReactCompositeComponentMixin.updateComponent @ react.js:6216 wrapper @ react.js:12868 ReactCompositeComponentMixin.performUpdateIfNecessary @ react.js:6164 ReactReconciler.performUpdateIfNecessary @ react.js:13667 runBatchedUpdates @ react.js:15356 Mixin.perform @ react.js:17245 Mixin.perform @ react.js:17245 assign.perform @ react.js:15313 flushBatchedUpdates @ react.js:15374 wrapper @ react.js:12868 Mixin.closeAll @ react.js:17311 Mixin.perform @ react.js:17258 ReactDefaultBatchingStrategy.batchedUpdates @ react.js:8842 batchedUpdates @ react.js:15321 ReactEventListener.dispatchEvent @ react.js:10336 Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `exports`. 

If I remove var List = require("components/Forms/productList/view.jsx"); I no longer get this error, but of course I cannot return to the list.

How can I make this stream work described above?

Answer 1

It seems you are importing your List component from a file that does not export it (please share your view.jsx file for others to view). Make sure you export the List component correctly. Sort of:

 // list.jsx export default class List extends Component { render() { return <ul> <li>Item 1</li> </ul>; } } 

Then import it:

 // app.jsx import List from './components/list';