Skip to content

Instantly share code, notes, and snippets.

@Garabed96 Garabed96/App.js
Created Mar 7, 2018

Embed
What would you like to do?
import React, { Component } from 'react';
import './App.css';
import {Modal, Button} from 'react-bootstrap/lib'
//Task1: I can create recipes that have names and ingredients.
class App extends Component {
constructor(props, context){
super(props);
this.state = { value: '', show: false};
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this); this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
this.handlePop = this.handlePop.bind(this);
this.handlePopped = this.handlePopped.bind(this);
}
handleShow(event) {
this.setState({value: event.target.value});
}
handleClose(event) {
alert('output: ' + this.state.value);
event.preventDefault();
}
handlePop() {
this.setState({ show: true });
}
handlePopped() {
this.setState({ show: false });
}
render() {
// const popover = (
// <Popover id="modal-popover" title="popover">
// pop this
// </Popover>
// );
// const tooltip = <Tooltip id="modal-tooltip">Wow much cool</Tooltip>;
return (
<div>
<div className="App">
<header className="App-header">
<title> Keto Recipe </title>
<h1 className="App-title">Ketogenisis title</h1>
</header>
</div>
<div className="Out">
<form onSubmit={this.handleClose}>
<label>
Write:
<textarea value={this.state.value} onChange={this.handleShow} />
</label>
<input className="box" type="submit" value="Submit" />
</form>
</div>
<div>
<Button bsStyle="primary" bsSize="large" onClick={this.handlePop}>
Launch Modal
</Button>
<Modal
show={this.state.show} onHide={this.handlePopped}
container={this}>
<Modal.Header closeButton>
<Modal.Title>Ketogic Entry</Modal.Title>
</Modal.Header>
<Modal.Body>
{/* <p>
there is a {' '}
<OverlayTrigger overlay={popover}>
<a href="#popover">popover</a>
</OverlayTrigger>{' '}
here
</p> */}
{/* <p>
there is a{' '}
<OverlayTrigger overlay={tooltip}>
<a href="#tooltip">tooltip</a>
</OverlayTrigger>{' '}
here
</p> */}
</Modal.Body>
<Modal.Footer>
<Button onClick={this.handlePopped}>Close</Button>
<Button bsStyle="primary">Save changes</Button>
</Modal.Footer>
</Modal>
</div>
</div>
);
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<App />,
document.getElementById('root')
);
registerServiceWorker();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.