My goal is to create a border radius previewer where the user defines the affect of the border radius. When I try to make an input nothing happens when I put in a value. When I delete the value I typed in, then the default value change disappears.
I've tried to modify the code and I've tried searching other questions and answers but I haven't found a solution.
import React from 'react';
import './App.css';
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
topleft: 30,
topright: 30,
bottomright: 30,
bottomleft: 30
}
}
handleChange = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({[nam]: val});
}
render() {
const borderStyle = {
borderRadius: this.state.topleft,
background: "#73AD21",
padding: "20px",
width: "200px",
height: "150px",
}
return (
<div className="App">
<h1>Border-Radius Previewer</h1>
<p style={borderStyle}>Box</p>
<p>Border-Radius Values:</p>
<input type="number" name="topleft" onChange={this.handleChange} />
<input type="number" name="topright" onChange={this.handleChange} />
<input type="number" name="bottomright" onChange={this.handleChange} />
<input type="number" name="bottomleft" onChange={this.handleChange} />
</div>
);
}
}
export default App;
numbered string is not recognized for inline style.
borderRadius: "100" means nothing
You should either write
borderRadius: "100px" or borderRadius: 100
You can simply update handleChange function to keep only number as the state value.
Updated Code
import React from 'react';
import './App.css';
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
topleft: 30,
topright: 30,
bottomright: 30,
bottomleft: 30
}
}
handleChange = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({[nam]: Number(val)});
}
render() {
const borderStyle = {
borderRadius: this.state.topleft,
background: "#73AD21",
padding: "20px",
width: "200px",
height: "150px",
}
return (
<div className="App">
<h1>Border-Radius Previewer</h1>
<p style={borderStyle}>Box</p>
<p>Border-Radius Values:</p>
<input type="number" name="topleft" onChange={this.handleChange} />
<input type="number" name="topright" onChange={this.handleChange} />
<input type="number" name="bottomright" onChange={this.handleChange} />
<input type="number" name="bottomleft" onChange={this.handleChange} />
</div>
);
}
}
export default App;
I supposed you want to apply topleft, topright, bottomright and bottomleft states as borderRadius — you could use string interpolation to append px on each value.
const { topleft, topright, bottomright, bottomleft } = this.state;
const borderStyle = {
borderRadius: `${topleft}px ${topright}px ${bottomright}px ${bottomleft}px`,
background: "#73AD21",
padding: "20px",
width: "200px",
height: "150px"
};
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<div id="app_root"></div>
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
topleft: 30,
topright: 30,
bottomright: 30,
bottomleft: 30
};
}
handleChange = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({ [nam]: val });
};
render() {
const { topleft, topright, bottomright, bottomleft } = this.state;
const borderStyle = {
borderRadius: `${topleft}px ${topright}px ${bottomright}px ${bottomleft}px`,
background: "#73AD21",
padding: "20px",
width: "200px",
height: "150px"
};
return (
<div className="App">
<h1>Border-Radius Previewer</h1>
<p style={borderStyle}>Box</p>
<p>Border-Radius Values:</p>
<input type="number" name="topleft" onChange={this.handleChange} />
<input type="number" name="topright" onChange={this.handleChange} />
<input type="number" name="bottomright" onChange={this.handleChange} />
<input type="number" name="bottomleft" onChange={this.handleChange} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app_root"));
</script>
So what you have to do brother is append a string to the state when you are setting the state and that is how 'px' is added.Complete code
class App extends Component {
constructor(props) {
super(props)
this.state = {
topleft: '30px',
topright: '30px',
bottomright: '30px',
bottomleft: '30px'
}
}
handleChange = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({[nam]: val+'px'});
}
render() {
console.log(this.state.topleft);
const borderStyle = {
borderRadius: this.state.topleft,
background: "#73AD21",
padding: "20px",
width: "200px",
height: "150px",
}
return (
<div className="App">
<h1>Border-Radius Previewer</h1>
<p style={borderStyle}>Box</p>
<p>Border-Radius Values:</p>
<input type="string" name="topleft" onChange={this.handleChange} />
<input type="string" name="topright" onChange={this.handleChange} />
<input type="string" name="bottomright" onChange={this.handleChange} />
<input type="string" name="bottomleft" onChange={this.handleChange} />
</div>
);
}
}
export default App;
Related
I am new to ReactJS. Have been learning ReactJS since January. Came across a question on function based form, I am unable to get the values typed by the user. Please help.
This is the question...
A form template is given to you. Upon submitting, the information should be displayed in a list below (automatically sorted by last name) along with all the previous information that was entered.
I did an "alert({fname})", but it does not show the content of what the user entered....could you pleaes help me. I am just a beginner in ReactJS.
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
const style = {
table: {
borderCollapse: 'collapse'
},
tableCell: {
border: '1px solid gray',
margin: 0,
padding: '5px 10px',
width: 'max-content',
minWidth: '150px'
},
form: {
container: {
padding: '20px',
border: '1px solid #F0F8FF',
borderRadius: '15px',
width: 'max-content',
marginBottom: '40px'
},
inputs: {
marginBottom: '5px'
},
submitBtn: {
marginTop: '10px',
padding: '10px 15px',
border:'none',
backgroundColor: 'lightseagreen',
fontSize: '14px',
borderRadius: '5px'
}
}
}
function PhoneBookForm({ addEntryToPhoneBook }) {
const [fname,setFname] = useState("");
const [lname, setLname] = useState("");
const [uphone, setUphone] = useState("");
return (
<form onSubmit={e => {
e.preventDefault();
alert({fname});
//alert(${fname});
//console.log({fname});
}}
style={style.form.container}>
<label>First name:</label>
<br />
<input
style={style.form.inputs}
className='userFirstname'
name='userFirstname'
type='text'
placeholder='Coder'
onChange={e => setFname(e.target.value)}
value={fname}
/>
<br/>
<label>Last name:</label>
<br />
<input
style={style.form.inputs}
className='userLastname'
name='userLastname'
type='text'
placeholder='Byte'
onChange={e => setLname(e.target.value)}
value={lname}
/>
<br />
<label>Phone:</label>
<br />
<input
style={style.form.inputs}
className='userPhone'
name='userPhone'
type='text'
placeholder='8885559999'
onChange={e => setUphone(e.target.value)}
value={uphone}
/>
<br/>
<input
style={style.form.submitBtn}
className='submitButton'
type='submit'
value='Add User'
/>
</form>
)
}
function InformationTable(props) {
return (
<table style={style.table} className='informationTable'>
<thead>
<tr>
<th style={style.tableCell}>First name</th>
<th style={style.tableCell}>Last name</th>
<th style={style.tableCell}>Phone</th>
</tr>
</thead>
</table>
);
}
function App(props) {
return (
<section>
<PhoneBookForm />
<InformationTable />
</section>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
export default App;
Thank you,
try this
remove all you put inside onSubmit in the form,
take them out and put them into a function expression
like this:
const handleUserInput = (event) => {
event.preventDefault();
alert(fname);
alert(lname);
alert(uphone);
}
change form to this:
<Form onSubmit={handleUserInput} style={style.form.container}>
lastly, just being cautious, wrap all 'e' used with onChange with parenthesis
like this:
onChange={(e) => setFname(e.target.value)}
Goodluck with react js
You are doing everything right, looks like only one thing cause the problem,
alert({fname})
it should be
alert(fname)
without curly braces.
How to use curly braces you can read more detailed at jsx documentation
hi i would to add the styling in dynamically generated html tags like, h1, img etc. I have generated the html tags through mapping but now i want to add some styling on it but i am unable to add styling on already generated tag.
const [textFieldStyles, setTextFieldStyles] = useState({
width: "5rem",
height: "2rem",
color: "blue",
fontSize: "20px",
});
const handleTextField = (e) => {
setTextFieldStyles({ ...textFieldStyles, [e.target.name]: e.target.value });
};
function handleAdd() {
const values = [...fields];
values.push({
top: 20,
left: 80,
tag: (
<h6
className="inputField"
style={{
width: textFieldStyles.width,
height: textFieldStyles.height,
color: textFieldStyles.color,
fontSize: textFieldStyles.fontSize,
}}
contentEditable="true"
>
hello
</h6>
),
});
setFields(values);
}
return (
<div>
fields.map((key, index)=>{
return {key.tag}
}
<label>width</label>
<input name="width" onChange={handleTextField} type="text" /><label>height</label>
<input name="height" onChange={handleTextField} type="text" /><label>color</label>
<input name="color" onChange={handleTextField} type="text" /><label>font Size</label>
<input name="fontSize" onChange={handleTextField} type="text" />
</div>
)```
Check this :
(Edited)
import React, { useState, useEffect } from "react";
export default function App() {
const [fields, setFields] = useState([]);
const [textFieldStyles, setTextFieldStyles] = useState({
width: "5rem",
height: "2rem",
color: "blue",
fontSize: "20px"
});
let values = [...fields];
const handleTextField = e => {
setTextFieldStyles({ ...textFieldStyles, [e.target.name]: e.target.value });
};
const handleAdd = () => {
values.push({
top: 20,
left: 80,
tag: (
<h6 className="inputField" style={textFieldStyles}>
hello
</h6>
)
});
setFields(values);
};
const submitForm = e => {
e.preventDefault();
handleAdd();
document.getElementById("form").reset();
};
useEffect(() => {
handleAdd();
}, []);
return (
<div>
{fields.map((key, index) => key.tag)}
<form id="form" onSubmit={submitForm}>
<label>width</label>
<input name="width" onChange={handleTextField} type="text" />
<label>height</label>
<input name="height" onChange={handleTextField} type="text" />
<label>color</label>
<input name="color" onChange={handleTextField} type="text" />
<label>font Size</label>
<input name="fontSize" onChange={handleTextField} type="text" />
<button type="submit">Click</button>
</form>
</div>
);
}
Demo: stackblitz
I have a login component in my cra app, and my state is showing up in my url, both in dev and production. I've replaced the email with {email}.
http://localhost:3000/?user={email}&password=password
I have no clue why this is happening. I have several other components, none of which exhibit the same behavior. I've also confirmed this is coming from the react component and not any of the route handling (I renamed the state and the url changed in kind).
How do I fix this?
import React from 'react';
import '../../App.css';
import { connect } from 'react-redux';
import * as actions from '../../actions';
import LoginButton from './LoginButton';
class Card extends React.Component {
constructor(props) {
super(props);
this.handleInputChange = this.handleInputChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
state = {
user: "",
password: ""
};
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
onSubmit(){
this.props.login(this.state.user, this.state.password);
}
render(){
return (
<div style={styles.container}>
<form style={styles.form}>
<div style={styles.formContainer}>
<div style={styles.block}>
<div style={{display: 'flex', flexDirection: 'row'}}>
<i class="fas fa-user-circle" style={styles.iconPosition}></i>
<div style={{display: 'flex', flexDirection: 'column', flex: 5}}>
<div style={{display: 'flex', alignItems: 'start', marginBottom: '15px', fontFamily: 'Ubuntu', fontSize: '14pt'}}>
EMAIL
</div>
<input
type="text"
name="user"
value={this.state.user}
onChange={this.handleInputChange}
placeholder='john.snow#solidcad.ca'
style={{fontFamily: 'Ubuntu', fontSize: '10px', border: 'none'}}
/>
</div>
</div>
</div>
<div style={styles.block}>
<div style={{display: 'flex', flexDirection: 'row'}}>
<i class="fas fa-unlock-alt" style={styles.iconPosition}></i>
<div style={{display: 'flex', flexDirection: 'column', flex: 5}}>
<div style={{display: 'flex', alignItems: 'start', marginBottom: '15px', fontFamily: 'Ubuntu', fontSize: '14pt'}}>
PASSWORD
</div>
<input
type="password"
name="password"
value={this.state.password}
onChange={this.handleInputChange}
placeholder='*****'
style={{fontFamily: 'Ubuntu', fontSize: '10px', border: 'none'}}
/>
</div>
</div>
</div>
<LoginButton label='LOGIN' onClick={this.onSubmit}/>
</div>
</form>
</div>
);
}
}
export default connect(null, actions)(Card);
This is the app component that contains the login screen and the login:
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import './App.css';
import Configurator from './components/Configurator';
import LoginScreen from './components/Login/LoginScreen';
import * as actions from './actions';
const Dashboard = () => <h2>Dashboard</h2>
class App extends Component {
componentDidMount(){
this.props.fetchUser();
}
renderContent() {
switch (this.props.auth) {
case null:
return <LoginScreen />;
default:
return (
<BrowserRouter>
<Route exact path="/" component={Configurator}/>
{/* <Route path="/dashboard/" component={Dashboard}/> */}
</BrowserRouter>
)
}
}
render() {
return (
<div className="App" style={styles.container}>
{this.renderContent()}
</div>
);
};
}
function mapStateToProps({ auth, desAut }) {
return { auth, desAut };
}
export default connect(mapStateToProps, actions)(App);
Thanks in advance for the help!
preventDefault is what you're looking for, you can change the button type to submit in the LoginButton component like this <input type="submit" value="Login"/> and then
<form
style={styles.form}
onSubmit={(e) => {
e.preventDefault();
this.onSubmit();
}}
>
You have to provide an onSubmit handler on your form like this:
<form onSubmit={(event) => {
event.preventDefault();
...process form data...
}>
...
</form>
How can I programmatically add/ remove the material-UI classes that I defined in makeStyles()
Here's my code:
import React from 'react';
import { DropboxIcon, GoogleDriveIcon, BoxIcon } from '../components/icons';
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles(theme => ({
input: {
display: 'none'
},
label: {
display: 'inline-flex',
marginRight: theme.spacing(2),
marginLeft: theme.spacing(2),
justifyCOntent: 'space-between',
padding: theme.spacing(1, 1.5)
},
iconName: {
marginLeft: theme.spacing(1)
},
iconsFormWrapper: {
marginTop: theme.spacing(2)
},
selectedService: {
backgroundColor: theme.palette.primary.dark,
borderRadius: theme.spacing(1),
color: '#ffffff',
'& svg, img': {
fill: '#ffffff!important',
filter: 'brightness(0) invert(1)'
}
}
}));
const selectServiceHandle = (e) => {
const optionName = document.getElementsByName("signup-service");
optionName.classList.remove("selectedService")
document.querySelectorAll(`input[value=${e.target.value}]`).classList.add("selectedService")
}
const SignupRadioIcons = () => {
const classes = useStyles();
return (
<div className={classes.iconsFormWrapper}>
<form>
<label className={`${classes.label} ${classes.selectedService}`}>
<DropboxIcon/> <span className={classes.iconName}>Dropbox</span>
<input type="radio" onChange={(e)=>selectServiceHandle(e)} name="signup-service" value="dropbox" className={classes.input} />
</label>
<label className={classes.label}>
<GoogleDriveIcon/> <span className={classes.iconName}>Google Drive</span>
<input type="radio" onChange={(e)=>selectServiceHandle(e)} name="signup-service" value="drive" className={classes.input} />
</label>
<label className={classes.label}>
<BoxIcon/> <span className={classes.iconName}>Box</span>
<input type="radio" onChange={(e)=>selectServiceHandle(e)} name="signup-service" value="box" className={classes.input} />
</label>
</form>
</div>
)
}
export default SignupRadioIcons;
In my code, I defined a class called selectedService in my makeStyles()
But I want to add/remove this class on every change event, Whenever a user click any input I want to remove this class from all other inputs and add it to the one where the user clicked. But this code is not working because the actual classes that is generated by material UI look like makeStyles-selectedService-224 and the postfix number keeps on changing on every refresh.
You can set state to the currently selected radio's value, then use a conditional statement to check if the selected value equals the currently selected state in order to apply css.
I would recommend converting your radio's into JSON objects, then looping through them - this makes things a lot easier.
I have provided an example of how to handle this without using a loop, as well as with using a loop in the SandBox below.
Example Code Using JSON & Looping:
import React, { useState } from "react";
import { makeStyles } from "#material-ui/core/styles";
import Dropbox from "./Dropbox.js";
import Box from "./Box.js";
import Drive from "./Drive.js";
const base = {
fontSize: "20px"
};
const useStyles = makeStyles(theme => ({
base: {
...base
},
selected: {
...base,
fontSize: "40px",
backgroundColor: "yellow",
textDecorationLine: "underline"
}
}));
const radioObjects = [
{
label: Dropbox,
value: "dropbox"
},
{
label: Drive,
value: "drive"
},
{
label: Box,
value: "box"
}
];
export default function WithLoop() {
const classes = useStyles();
const [currentlyChecked, setCurrentlyChecked] = useState();
function handleChange(event) {
setCurrentlyChecked(event.target.value);
// do work
}
return (
<div>
<form>
{radioObjects.map(RadioItem => {
return (
<div key={RadioItem.value}>
<label
className={
currentlyChecked === RadioItem.value
? classes.selected
: classes.base
}
>
<RadioItem.label />
<input
value={RadioItem.value}
onChange={handleChange}
type="radio"
name="signup-service"
/>
</label>
</div>
);
})}
</form>
</div>
);
}
Given you are using React, I'd suggest you use local state to determine when to apply the class
import React, { useState } from 'react';
const storageProviders = {
Dropbox: 1,
GoogleDrive: 2,
Box: 3
};
...
const SignupRadioIcons = () => {
const classes = useStyles();
const [focusedInput, setFocusedInput] = useState(storageProviders.Dropbox);
return (
<div className={classes.iconsFormWrapper}>
<form>
<label className={`${classes.label} ${focusedInput === storageProviders.Dropbox ? classes.selectedService : ''}`}>
<DropboxIcon/> <span className={classes.iconName}>Dropbox</span>
<input type="radio" onChange={() => setFocusedInput(storageProviders.Dropbox)} name="signup-service" value="dropbox" className={classes.input} />
</label>
<label className={`${classes.label} ${focusedInput === storageProviders.GoogleDrive ? classes.selectedService : ''}`}>
<GoogleDriveIcon/> <span className={classes.iconName}>Google Drive</span>
<input type="radio" onChange={() => setFocusedInput(storageProviders.GoogleDrive)} name="signup-service" value="drive" className={classes.input} />
</label>
<label className={`${classes.label} ${focusedInput === storageProviders.Box ? classes.selectedService : ''}`}>
<BoxIcon/> <span className={classes.iconName}>Box</span>
<input type="radio" onChange={() => setFocusedInput(storageProviders.Box)} name="signup-service" value="box" className={classes.input} />
</label>
</form>
</div>
)
}
There's a common pattern there that you could probably move into a reusable component but you get the jist of it.
This code will work if react version is more than 16
import React, { useState } from 'react';
const SignupRadioIcons = () => {
const classes = useStyles();
const [selectedService, setSelectedService]= useState('dropbox');
return (
<div className={classes.iconsFormWrapper}>
<form>
<label className={`${classes.label} ${selectedService === 'dropbox' ? classes.selectedService : undefined}`}>
<DropboxIcon/> <span className={classes.iconName}>Dropbox</span>
<input type="radio" onChange={(e)=> setSelectedService('dropbox')} name="signup-service" value="dropbox" className={classes.input} />
</label>
<label className={`${classes.label} ${selectedService === 'googleDrive' ? classes.selectedService : undefined}`}>
<GoogleDriveIcon/> <span className={classes.iconName}>Google Drive</span>
<input type="radio" onChange={(e)=> setSelectedService('googleDrive')} name="signup-service" value="drive" className={classes.input} />
</label>
<label className={`${classes.label} ${selectedService === 'box' ? classes.selectedService : undefined}`}>
<BoxIcon/> <span className={classes.iconName}>Box</span>
<input type="radio" onChange={(e)=> setSelectedService('box')} name="signup-service" value="box" className={classes.input} />
</label>
</form>
</div>
)
}
I'm making a small TODO list project and I hit the wall. I created a form that is responsible for adding new tasks on the list. It consists of two inputs - one for the task name and the other one for the description. There's also an image submit input.
The problem is that only the first item is appended. Another entries just replace the current one. I was trying to somehow gather all of these into one array and map but was unsuccessful. Perhaps it's a couple of lines of code to make this work properly and I'm missing something. Please take a look:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import addStaticButton from './images/addStaticBtn.png';
import addButton from './images/addTaskBtn.png';
var todoContainer = document.getElementById('todo');
class AddTaskElement extends Component {
render() {
const styling = {
addTaskContainer: {
border: "2px solid #000",
width: "350px",
cursor: 'pointer',
boxSizing: 'border-box'
},
leftArea: {
position: 'relative',
float: 'left',
marginRight: '20px',
padding: '12px'
},
addStaticBtn: {
width: '50px',
height: '50px'
}
}
return (
<div style={styling.addTaskContainer} onClick={this.props.isAddTaskClicked} className="addTaskContainer">
<div style={styling.leftArea} className="leftArea">
<img style={styling.addStaticBtn} id="addStaticBtn" alt="addStaticBtn" src={addStaticButton}/>
</div>
<div className="rightArea">
<h1 id="addTaskText">ADD TASK</h1>
</div>
</div>
);
}
}
class TaskInfo extends Component {
constructor(props) {
super(props);
}
render() {
const styling = {
taskInfoContainer: {
border: "2px solid #000",
boxSizing: 'border-box',
width: '350px'
},
taskNameContainer: {
padding: '10px',
},
taskDescriptionContainer: {
padding: '10px'
},
label: {
width: '100px',
display: 'inline-block'
},
taskName: {
width: '220px'
},
taskDescription: {
width: '220px',
height: '75px'
},
addTaskBtn: {
width: '50px',
height: '50px'
},
addTaskBtnContainer: {
textAlign: 'center'
}
}
return(
<div style={styling.taskInfoContainer} className={this.props.taskElementItemClass}>
<form onSubmit={this.props.formSubmit}>
<div className="taskNameContainer" style={styling.taskNameContainer}>
<label style={styling.label}>Name: </label>
<input id="taskName" style={styling.taskName} name="name" type="text" />
</div>
<div style={styling.taskDescriptionContainer} className="taskDescriptionContainer">
<label style={styling.label}>Description: </label>
<textarea id="taskDescription" style={styling.taskDescription} ></textarea>
</div>
<div style={styling.addTaskBtnContainer}>
<input style={styling.addTaskBtn} type="image" src={addButton} alt="Add Task" />
</div>
</form>
</div>
);
}
}
class TaskItem extends Component {
render() {
return(
<div>
{/*{this.props.children}*/}
<p>{this.props.taskItemName}</p>
<p>{this.props.taskItemDescription}</p>
</div>
);
}
}
class TaskList extends Component {
static defaultProps = {
numberOfTasks: 0
}
render() {
const styling = {
taskListContainer: {
width: '350px',
border: '2px solid #000',
boxSizing: 'border-box',
textAlign: 'center'
}
};
return(
<div>
<div className="taskListContainer" style={styling.taskListContainer}>
<p>Task List ({this.props.numberOfTasks})</p>
<TaskItem taskItemName={this.props.taskItemName} taskItemDescription={this.props.taskItemDescription} />
</div>
</div>
);
}
}
class Printer extends Component {
constructor(props) {
super(props);
this.state = {
taskElementItemState: 'hidden',
taskName: '',
taskDescription: ''
}
this.handleAddTaskClick = this.handleAddTaskClick.bind(this);
this.handleTaskAdd = this.handleTaskAdd.bind(this);
}
handleTaskAdd(e) {
e.preventDefault();
this.setState({
taskName: document.getElementById('taskName').value,
taskDescription: document.getElementById('taskDescription').value
});
}
handleAddTaskClick() {
this.setState({
taskElementItemState: this.state.taskElementItemState === 'hidden' ? 'visible' : 'hidden'
});
}
render() {
return(
<div>
<AddTaskElement isAddTaskClicked={this.handleAddTaskClick}/>
<TaskInfo formSubmit={this.handleTaskAdd} taskElementItemClass={this.state.taskElementItemState}/>
<TaskList taskItemName={this.state.taskName} taskItemDescription={this.state.taskDescription} />
</div>
);
}
}
ReactDOM.render(<Printer/>, todoContainer);