React: Use component inside another component

Question

I'm new to react so I hope the questions isn't too stupid.

In short: I want to use a certain Component inside another components props. But it isn't working like desired.

I want to use Material UI Cards in following Component: Link to repo of "Material-UI Tree View"

For testing I wrote following code:

import React,{Component} from 'react';
import SplitPane from "react-split-pane";
import MuiTreeView from 'material-ui-treeview';
import Demo from './demo';


export class App extends Component {
    render() {

        const tree = [
            {
                value: 'Parent A',
                nodes: [{ value: Demo}]
            }

        ];
        return (
            <SplitPane split="vertical"  defaultSize={500} allowResize={false}>

                <div><MuiTreeView tree={tree} /></div>
                <div id="mynetwork"></div>
            </SplitPane>
        );
    }
}

The import

import Demo from './demo';

is the example Simple Card: https://codesandbox.io/s/3vl744v6z5

In my index.js I render the App Component like this:

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

I hope that you could give me a tip where to have a look at.

Thanks in advance,

coloeus

Answer 1

No can do, as in checking in the source files of MuiTreeView, tree prop can only be either a string, or recursively an object where props values are strings...

Since you're using MaterialUI components, try checking the expansion panels that MUI provides and try to get the desired results. In this case, no need to pass your components as props.

Answer 2

MuiTreeView expects a tree with on each leaf node a .value member which is the string to be rendered. It simply does not support injecting custom components in this way.

You can tell by looking at its prop-types