Good day! In a small web application, React created two classes, one - the navigation menu, the second - the output of the entity (employee) editing form. I can’t arrange it in any way so that the menu on the left is located, and the editing form is to the right or center. Menu class rendering code.
render: function() { .... return ( <div className="left-widget"> <ul> { Menu.map(function(m, index){ var style = ''; if (self.state.focused == index && m.sub) { style = 'focused'; return <Content firstName={Menu[index].firstName} lastName={Menu[index].text} iddep={Menu[index].iddep} id={Menu[index].id} /> }; if (m.sub){ return <li className={style} key={index} onClick= {self.clicked.bind(self, index)}>{m.text}</li>} else{} return <li key={index} onClick={self.clicked.bind(self, index)}><b>{m.text}</b></li>; }) } </ul> </div> ); // return } // render Content output code.
render: function() { return ( <div className="content"> <p></p> <p><b>Редактирование {self.state.last_}</b></p> <p><label>id department</label></p><p><input type="text" value={self.state.iddep_} onChange={this.handleChangeId} /> </p> <p><label>first name</label></p><p><input type="text" value={self.state.first_} onChange={this.handleChangeFirst}/></p> <p><label>last name</label></p><p><input type="text" value={self.state.last_} onChange={this.handleChangeLast}/></p> <p><button onClick={this.clicked.bind()}>Изменить</button></p> <p></p> </div> ); // return } // render I just can’t adjust the output of the content to be visually separated from the menu, the content is rigidly displayed in the menu div, even explicit
ReactDOM.Render(<Component />, document.getElementById("content")); For the menu is called
ReactDOM.render(<MenuExample />, document.getElementById("left_widget")); How to properly configure the output class Content? How can this be done? Thank.
