reactjs - non-child dynamic list of components in react -

so can have structure of components :

main ┣ header ┣ lateralmenu ┗ principleview     ┣ random     ┗ blabla 

and in structure possible me use randoms (dynamic or user controlled) list of randoms , map them out in principleview. (so user can add , remove randoms , display updates reflect that)

and not pass paramaters parent child them constructed way want.

all have import random in principle view.

but if have :

main ┣ header ┣ lateralmenu <- array of templates displayed here     ┗ template <- delete button created here ┗ principleview <- template's add button , constructor array of templates     ┣ random     ┗ blabla 

(same thing. user can save , delete template , there's display of list of templates)

but problem not want have list of templates have paramaters passed down randoms, want "add template" button input field name of template in principalview. , map/list of templates displayed children of lateralmenu component.

(the delete button template part of constructed template list need passed because 1 non-parent component has add button , 1 non-child component has remove button)

i'd love think it's same thing if weren't fact have no idea how pass array of templates i've declared in principleview lateralmenu.

how 1 go this?

is case array of templates declared first in main passed down both lateralmenu , principleview , passed main comunicate changes?

here's "template" code looks give idea :

import react, { component } 'react'; import { button } 'reactstrap';  export default class templatecomponent extends component {      ondelete = () => {         this.props.ondelete(this.props.name);     };      render() {         const { name } = this.props;         return (             <div classname="inline">                 <i classname="fa fa-floppy-o" aria-hidden="true" />                 <div classname="shorten-text">                     <div classname="text-content">{this.name}</div>                 </div>                 ... <button classname="btn-info smaller-btn">ouvrir</button> < button                 onclick={this.ondelete} classname="btn-info x-btn">x</button>             </div>         );     } } 

and code in "principalview" :

import react, { component } 'react'; import { button, card, cardtitle, input } 'reactstrap'; import switcher '../switcher/switcher'; import searchbytype '../cardcollection/searchbytype'; import searchextended '../cardcollection/searchextended';  const proptypes = {     parameters: react.proptypes.array,     exportparameter: react.proptypes.func, };  class principalviewcomponent extends component {      constructor(props) {         super(props);         this.state = {             templates: this.props.parameters,             name: '',             invalue: '',             dropdownopen: false,             newstate: true,         };         this.toggledropdown = this.toggledropdown.bind(this);         this.handleswitch = this.handleswitch.bind(this);         this.addtemplate = this.addtemplate.bind(this);         this.removetemplate = this.removetemplate.bind(this);         this.updatename = this.updatename.bind(this);     }      addtemplate = (name) => {         this.props.exportparameter(this.state.templates);         const newtemplate = this.state.templates.concat({ x: name });         this.setstate({             templates: newtemplate,             invalue: '',         });     };      removetemplate = (name) => {         this.props.exportparameter(this.state.templates);         this.setstate({             templates: this.state.templates.filter(x => x.name !== name),         });     };      toggledropdown() {         this.setstate({             dropdownopen: !this.state.dropdownopen,         });     }      updatename(event) {         this.setstate({             name: event.target.value,         });     }      handleswitch(newstate) {         this.setstate({ newstate });     }      render() {         return (             <card id="card-interface">                 <div>                     <div classname="inline">                         <input                             classname="name-save-input"                             placeholder="nom (obligatoire)"                             value={this.state.name}                             onchange={this.updatename}                             onclick={() => { this.addtemplate(this.state.name); }}                         />                         <button classname="btn-info" onclick={() => { this.addtemplate(this.state.name); }}>                             <i classname="fa fa-floppy-o" aria-hidden="true" /> sauvegarder en template                         </button>                     </div>                     <div classname="title-switcher-block">                         <cardtitle>recherche par type</cardtitle>                         <switcher callback={this.handleswitch} />                         <cardtitle>recherche etendue</cardtitle>                     </div>                 </div>                 <div id="main-table-master">                     {/* switch between content */}                     {this.state.newstate ?                         <searchbytype />                         : <searchextended />}                 </div>                 <div classname="footer">                     <button classname="generate" id="btn">générer</button>                 </div>             </card>         );     } }  interfacecardcomponent.proptypes = proptypes;  export default interfacecardcomponent; 

but mapping happens in "lateralmenu" :

import react, { component } 'react'; import { button } 'reactstrap'; import template './template/template'; class lateralmenucomponent extends component {     constructor(props) {         super(props);         this.state = {};         this.ontoggle = this.ontoggle.bind(this);     }     render() {         return (             <div id="menu">                 <collapsecard                     classname="menu-card"                     headercontent={<div>                     <i classname="fa fa-floppy-o" aria-hidden="true" />                      templates                     </div>}                 >                     {this.state.template.map((mapstoragevariable) => {                             return (<template                                 name={mapstoragevariable.name}                                 onremove={() =>                               {this.removetemplate(mapstoragevariable.name); }}                             />);                         }                         return null;                     })}                </collapsecard>            </div>         );     } } export default lateralmenucomponent; 

i'm close missing key parts of puzzle

this want (and have except functional buttons) :

check out...

app.js     import {card1,card2,card3} "./templates/card"      class app extends react.component {        constructor(){              this.state = {                 template: card1               };         }         changeevent(e){             e.persist()             this.setstate({               template:e.target.value             })         }         render() {              return (                 <div>                     <header txt="demo">                         <searchform ></searchform>                     </header>     <select onchange={this.changeevent.bind(this)}>      <option value="card1">card 1</option>       <option value="card2">card 2</option>       <option value="card3">card 3</option>     </select>                     <div classname="container">                          <list itemcomponent={this.state.template}></list>                     </div>                 </div>             )         }     } 

list.js

export class list extends react.component {      render() {         let itemcomponent = this.props.itemcomponent;             return <div>                          const props = {                             result,                             key: result._id                         }                         return react.createelement(                             itemcomponent,                             props                         )             </div>      } }