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

Question

I want to create the next flow using react 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 press the delete button on this form, the product will be deleted from DB and the list will be displayed. I have the <List /> component and <Product /> component. Also I am using Browserify.

In render function of <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 datas, and onClick on a row, it returns the ID for that product, and in <List /> component there is a goToProduct function that sets the state value for productId.

In <Product /> the product details are displayed on a form, and there is a delete button. Here I've tried to include with Browserify the <List /> component, to do something similar, if I delete 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'm trying to click on the list and go to <Product /> I'm getting 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 don't get anymore this error, but of course, I can't go back to the list.

How can I make this flow work as described above?

Answer 1

It seems you are importing your List component from a file that is not exporting it (please share your view.jsx file for others to see). Make sure you export your List component correctly. Something along the lines 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';