Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react';
- export default class Obj extends React.Component {
- constructor(props) {
- super(props);
- console.log(props);
- }
- render() {
- let objs = Object.entries(this.props.data)
- .map((keyValue, index) => (
- <p key={index}><b>{keyValue[0]}</b> - {keyValue[1]}</p>
- ));
- console.log(objs);
- return <div>{objs}</div>
- }
- }
- import React from 'react';
- export default class Modal extends React.Component {
- constructor(props) {
- super(props);
- }
- close(e) {
- e.preventDefault();
- e.stopPropagation();
- this.props.onCloseModal();
- }
- render() {
- if (!this.props.isModalOpen) {
- return <div></div>;
- }
- return (
- <div class="modal" style={{ display: "block" }}>
- <div class="modal-content">
- <div class="modal-header">
- <span class="close" onClick={e => this.close(e)}>×</span>
- <h2>Details</h2>
- </div>
- <div class="modal-body">
- {this.props.children}
- </div>
- </div>
- </div>
- );
- }
- }
- render() {
- return (
- <div>
- <Modal
- isModalOpen={this.state.isModalOpen}
- onCloseModal={this.onCloseModal.bind(this)}
- >
- <Obj data={this.state.data} />
- </Modal>
- </div>
- );
- }
Add Comment
Please, Sign In to add comment