import React, { Component } from 'react';
import BOX from './ComponentBOX.js'
import Modal from 'react-modal';
export default class App extends React.Component {
constructor() {
super();
this.state = {
modalIsOpen: false ,
title:[],
recipe:[],
temptitle:'',
tempval:'',
temparray:[],
//make them one then mutate
compcount:0
};
this.openModal = this.openModal.bind(this);
this.afterOpenModal = this.afterOpenModal.bind(this);
this.closeModal = this.closeModal.bind(this);
}
openModal() {
this.setState({modalIsOpen: true});
}
afterOpenModal() {
// references are now sync'd and can be accessed.
}
closeModal() {
this.setState({modalIsOpen: false});
}
handleChange(event) {
this.setState({temptitle: event.target.value});
}
handleChangeIngredients(event)
{
this.setState({tempval:event.target.value}) ;
// console.log(event.target.value);
}
makeComponent( )
{
this.setState( {temparray:this.state.temparray.push(this.state.temptitle) }) ;
this.setState( {title:this.state.compcount }) ;
this.setState({
temparray: this.state.temparray.concat([this.state.tempval])
});
this.setState({compcount:this.state.compcount + 1}) ;
this.setState({modalIsOpen: false});
}
render() {
console.log("tile is + " + this.state.title) ;
if(this.state.compcount!=0)
{
var itm = this.state.temparray.map((item,index)=>{
console.log("item is " +item) ;
return <BOX key={index} array={this.state.temparray} /> ;
}) ;
}
console.log(this.state.temparray + " rendrer") ;
return (
<div>
<div className="box">
{itm}
</div>
<button id="addr" onClick={this.openModal} className="btn btn-primary">ADD Recipe</button>
<Modal
isOpen={this.state.modalIsOpen}
onAfterOpen={this.afterOpenModal}
onRequestClose={this.closeModal}
className="modals"
>
<h5>Add a Recipe</h5>
<hr></hr>
<p> <b>Recipe</b> </p>
<input type="text" placeholder="Recipe Name" value={this.state.temptitle} onChange={event=>this.handleChange(event)}></input>
<hr></hr>
<p> <b>Ingredients</b> </p>
<textarea placeholder="Enter Ingredients Name , Separated, By Comma ," onChange={event=>this.handleChangeIngredients(event)}></textarea>
<hr></hr>
<button onClick={()=>this.makeComponent()} className="btn btn-primary">Add</button>
<button onClick={this.closeModal} className="btn btn-primary">Close</button>
</Modal>
</div>
);
}
}
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.