Develop Reference

React form does not render the state values I put on constructor

I have a tab component with 2 tabs. The first tab contains a list of employees and a button that transfers you in the second tab (contact form) containing the data of the selected employee. In the first tab I create an object of an employee, send it in the second tab and in the second tab i set the state.name, state.surname with the object values.
The problem is that in order to load the data in the form I need to change back in the first tab and go to the second tab again.
The tabs component
import React from 'react';
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && (
<Box p={3}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired,
};
function a11yProps(index) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
var importErg = new Boolean(false);
export function getImport(){
return importErg;
}
export const globalErg = {
onoma: "",
epitheto: ""
}
export function getGlobalErg(){
return globalErg;
}
async function getErgByeID(ErgEid){
globalErg.onoma = ""
globalErg.epitheto = ""
await fetch(URL+"/ergazomenoi?eid=eq."+ErgEid)
.then(response => {if(response.ok){
return response.json()
}
else {
alert('Something went wrong')
throw new Error('Something went wrong');
}
})
.then(data => {
globalErg.onoma = data[0].onoma
globalErg.epitheto = data[0].epitheto
}
)
}
export default function SimpleTabs() {
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
function more(ergID){
setValue(1);
getErgByeID(ergID);
}
}
return (
<div className="main">
<AppBar position="static" id = "topbar">
<Tabs value={value} onChange={handleChange}>
<Tab label="Employees" {...a11yProps(0)}/>
<Tab label="Contact" {...a11yProps(1)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
<Table />
<Button style={{color: "#fff", background: "#111", marginRight: "2.5px", marginLeft:"2.5px", marginTop:"5px"}} onClick={() => more()}>
Contact
</Button>
</TabPanel>
<TabPanel value={value} index={1} id = 'tab'>
<Contact/>
</TabPanel>
</div>
);
}
the form component
import React, { Component, useEffect } from "react";
import {getGlobalErg} from "./Proswpiko-tabs";
class Personal_info extends Component {
constructor(props){
super(props);
let erg = getGlobalErg();
this.state = {
onoma: erg.onoma,
epitheto: erg.epitheto,
};
}
onomaChangeHandler = (event) => {
this.setState({onoma: event.target.value});
}
epithetoChangeHandler = (event) => {
this.setState({epitheto: event.target.value});
}
render() {
return (
<form onSubmit = {this.SubmitHandler}>
<div >
<p id = "topText" align = "center">
<h2>Contact info</h2>
</p>
<img id="top" src="top.png" alt=""></img>
<div id="form_container">
<form id="form" class="appnitro" method="post" action="">
<div class="form_description">
<h2>Personal info</h2>
</div>
<ul>
<li id = "li_3">
<label class="description" for="element_3" >Όνομα </label>
<span>
<input type ="text" id="nameInput" name= "nameInput" class="element text" maxLength="255" size="15" onChange={this.onomaChangeHandler} value = {this.state.onoma} required/>
<label>Name</label>
</span>
<span>
<input type ="text" id="surNameInput" name= "surNameInput" class="element text" maxLength="255" size="14" onChange={this.epithetoChangeHandler} value = {this.state.epitheto} required/>
<label>Surname</label>
</span>
</li>
</ul>
</form>
<div id="footer">
</div>
</div>
<img id="bottom" src="bottom.png" alt=""></img>
</div>
</form>
);}}
export default Personal_info;

It seems that since the setState func is async It didnt had time to fill the imput boxes.
Solution: Added setTimeout and now everything works fine

ReactJS TypeError: Cannot read property 'setState' of undefined even after binding in the constructor and also using the arrow function

I'm getting the error at line 116
checked={this.setState({selectedOption: "Male"})}
If I remove that line, then I get the same error at the next line.
import React, { Component } from "react";
import { Document, Page } from "react-pdf";
import { pdfjs } from 'react-pdf';
import SplitPane, { Pane } from 'react-split-pane';
import { Button } from 'react-bootstrap';
import axios from 'axios';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
export class TestPage extends React.Component{
constructor(props){
super(props);
this.state = {
numPages: null,
pageNumber: 1,
items: [],
responses: [],
color: '',
name: "React",
selectedOption: "Male",
};
this.onValueChange = this.onValueChange.bind(this);
this.formSubmit = this.formSubmit.bind(this);
this.goToPrevPage = this.goToPrevPage.bind(this);
this.goToNextPage = this.goToNextPage.bind(this);
this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);
}
componentDidMount(){
axios.get("http://localhost:5000/getquestiondata")
.then(
(result) => {
this.setState({
items: result.data.number,
});
}).catch(error => {
console.log("Error: ", error)
})
}
onDocumentLoadSuccess = ({ numPages }) => {
this.setState({ numPages: numPages });
};
formSubmit = event => {
event.preventDefault();
console.log(this.state.selectedOption);
}
onValueChange = event =>{
this.setState({
selectedOption: event.target.value
});
}
goToPrevPage = () =>
this.setState(state => ({ pageNumber: state.pageNumber - 1 }));
goToNextPage = () =>
this.setState(state => ({ pageNumber: state.pageNumber + 1 }));
render() {
const { pageNumber, numPages, items } = this.state;
var quesNos = [];
// var resp = [];
for(var i = 0; i < items; i++){
quesNos.push(i);
// resp.push(i);
}
console.log("QuesNos: ",quesNos);
return (
<div>
<h1 style={{textAlign: "center"}}>Online Test #1</h1>
<hr />
<SplitPane
split="vertical"
sizes={[50,50]}
defaultSize={parseInt(localStorage.getItem('splitPos'), 10)}
onChange={size => localStorage.setItem('splitPos', size)}
style={{overflow: 'scroll'}}
>
<div style={{overflowY: 'scroll', height:'100%', overflowX: 'scroll'}}>
<nav>
<button onClick={this.goToPrevPage}>Prev</button>
<button onClick={this.goToNextPage}>Next</button>
</nav>
<div>
<Document
file={require('./sample.pdf')}
onLoadSuccess={this.onDocumentLoadSuccess}
>
<Page pageNumber={pageNumber}/>
</Document>
</div>
<p>
Page {pageNumber} of {numPages}
</p>
</div>
<div style={{overflowY: 'scroll', height:'100%', overflowX: 'scroll'}}>
<form onSubmit={this.answerSubmit}>
{quesNos.map(function(qno){
return(
<div>
<div className="radio">
<label>
<input
type="radio"
value="Male"
checked={this.setState({selectedOption: "Male"})}
onChange={this.onValueChange}
/>
Male
</label>
</div>
<div className="radio">
<label>
<input
type="radio"
value="Female"
checked={this.state.selectedOption === "Female"}
onChange={this.onValueChange}
/>
Female
</label>
</div>
<div className="radio">
<label>
<input
type="radio"
value="Other"
checked={this.state.selectedOption === "Other"}
onChange={this.onValueChange}
/>
Other
</label>
</div>
<div>
Selected option is : {this.state.selectedOption}
</div>
<Button variant="btn btn-primary" type="submit">Submit</Button>
</div>
);
})}
<Button variant='primary' type="submit">Submit</Button>{' '}
</form>
</div>
</SplitPane>
</div>
);
}
}
Any idea why this error happens and how to fix it?
Thanks!

Two errors in your code
Your map function must be an arrow function to leverage this of the class/ or you use .bind for the map function
You must not setState directly in render. I assume you meant to compare state with checked attribute like checked={this.state.selectedOption === "Male"}
Updated code below
{quesNos.map((qno) => { // arrow function here
return(
<div>
<div className="radio">
<label>
<input
type="radio"
value="Male"
checked={this.state.selectedOption === "Male"} // Comparison here
onChange={this.onValueChange}
/>
Male
</label>
</div>
<div className="radio">
<label>
<input
type="radio"
value="Female"
checked={this.state.selectedOption === "Female"}
onChange={this.onValueChange}
/>
Female
</label>
</div>
<div className="radio">
<label>
<input
type="radio"
value="Other"
checked={this.state.selectedOption === "Other"}
onChange={this.onValueChange}
/>
Other
</label>
</div>
<div>
Selected option is : {this.state.selectedOption}
</div>
<Button variant="btn btn-primary" type="submit">Submit</Button>
</div>
);
})}

Getting Select Value Using React

Trying to access Bootstraps select form value using React props. This is what i've tried so far but it doesn't store the options value.
Example Code:
class BottomBar extends React.Component {
constructor(props) {
super(props);
this.state = {
hidden: true,
items: [],
text: '',
priority: ''
};
this.handleClick = this.handleClick.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handlePriority = this.handlePriority.bind(this);
};
handleChange(e) {
this.setState({text: e.target.value});
}
handlePriority(t) {
this.setState({priority: t.target.value});
}
handleSubmit(e) {
e.preventDefault();
if(!this.state.text.length) {
return;
}
const newItem = {
text: this.state.text,
id: Date.now(),
priority: this.state.priority
};
this.setState(state => ({items: state.items.concat(newItem), text: '', priority: ''}));
console.log(newItem);
}
handleClick(t) {
i++;
if(i === 1) {
this.setState({hidden: false});
} else if(i === 2) {
this.setState({hidden: true});
i = 0;
}
}
render() {
const { classes } = this.props;
return(
<React.Fragment>
<AddCard items={this.state.items} id={this.state.id} priority={this.state.priority} item={this.state.item}/>
<CssBaseline />
<AppBar position="fixed" color="primary" className={classes.appBar}>
{!this.state.hidden ? <TodoList text={this.state.text} handlePriorty={this.handlePriorty} priority={this.state.priority} handleSubmit={this.handleSubmit} items={this.state.items} handleChange={this.handleChange}/> : null}
<Toolbar className={classes.toolbar}>
<IconButton color="inherit" aria-label="Open drawer">
<MenuIcon />
</IconButton>
<a href="#" onClick={this.handleClick}>
<Button variant="fab" color="secondary" aria-label="Add" className={classes.fabButton}>
<AddIcon />
</Button>
</a>
<div>
<IconButton color="inherit">
<SearchIcon />
</IconButton>
<IconButton color="inherit">
<MoreIcon />
</IconButton>
</div>
</Toolbar>
</AppBar>
</React.Fragment>
);
}
}
class TodoList extends React.Component {
render() {
return(
<div className="container">
<form onSubmit={this.props.handleSubmit}>
<div className={"form-group"}>
<label htmlFor={"title"}>Enter A Task Title</label>
<input value={this.props.text} onChange={this.props.handleChange} type="text" className={"form-control"} id="title" rows="3"></input>
</div>
<div className={"form-group"}>
<label htmlFor={"exampleFormControlSelect1"}>Example select</label>
<select onChange={this.props.handlePriority} className={"form-control"} id="exampleFormControlSelect1">
<option value={this.props.priority} onChange={this.props.handlePriority}>Low Priority</option>
<option value={this.props.priorty} >Medium Priority</option>
<option value={this.props.priorty} >High Priority</option>
<option value={this.props.priorty} >Important</option>
<option value={this.props.priorty} >Very Important</option>
</select>
</div>
<button className={"btn btn-primary btn-custom"}>Add : {this.props.items.length + 1}</button>
</form>
</div>
);
}
}
My code contains two classes one of them is setting the stored values in states and my second class is accepting these states through props. My text input works fine, but my select / options selector doesn't seem to save the value selected.
Output:
Thank you for any constructive feedback.

I highly recommend you to split your code into smaller functions.
In particular, I would recommend a class component as a wrapper and function components for your select & option nodes.
First, lets create a function component for the option node
const Option = ({ value, description }) => (
<option value={value}>{description}</option>
);
As you can see, it takes 2 arguments: value & description. Feel free to add your own.
Then, lets create a function component for our select node
const SelectBox = ({ children, onChange, value }) => (
<select onChange={onChange} value={value}>
{children}
</select>
);
And as last step, we put it all together:
class App extends React.Component {
state = {
value: 2
};
handleChange = e => {
this.setState({ value: e.target.value });
};
render() {
return (
<div className="App">
<SelectBox onChange={this.handleChange} value={this.state.value}>
<Option value="1" description="First Item" />
<Option value="2" description="Second Item" />
<Option value="3" description="Third Item" />
</SelectBox>
</div>
);
}
}
Link to codebox

How to check/uncheck a list of checkboxes in react

I have a room page and in that page I have a list of sensors attached to that room, those sensors can be selected using a checkbox, like so:
<div className="checkboxRowContent">
{sensors.map(s => {
return (
<div className="checkboxElementWrapper" key={s.id}>
<label htmlFor={`sensor${s.id}`}>
<div className="checkboxLabel">
<Link to={`/sensors/edit/${s.id}`}>{s.name}</Link>
</div>
<input
type="checkbox"
id={`sensor${s.id}`}
name="sensorId"
value={s.id}
checked={s.roomId === values.id}
onChange={handleCheckbox}
/>
<span className="checkbox" />
</label>
</div>
);
})}
</div>
the problem is - this approach prohibits me from unchecking the checkbox (so if in db that sensor is attached to that room - that's it). How could I rewrite this so that I can check/uncheck this checkbox?

in the class you must have state for that,
a sample would be somewhat like this
export default class yourComponent extends React.Component {
state = {
checkedBoxes: []
}
handleCheckbox = (e, s) => {
const checkedBoxes = [...this.state.checkedBoxes];
if(e.target.checked) {
checkedBoxes.push(s)
} else {
const index = checkedBoxes.findIndex((ch) => ch.roomId === s.roomId);
checkedBoxes.splice(index, 1);
}
this.setState({checkedBoxes});
}
render() {
return(
<div className="checkboxRowContent">
{sensors.map(s => {
return (
<div className="checkboxElementWrapper" key={s.id}>
<label htmlFor={`sensor${s.id}`}>
<div className="checkboxLabel">
<Link to={`/sensors/edit/${s.id}`}>{s.name}</Link>
</div>
<input
type="checkbox"
id={`sensor${s.id}`}
name="sensorId"
checked={checkedBoxes.find((ch) => ch.roomId === s.roomId)}
onChange={(e) => handleCheckbox(e, s)}
/>
<span className="checkbox" />
</label>
</div>
);
})}
</div>
)
}
}
A state, checkedBoxes for getting all selected checkboxes.
A handler handleCheckbox for handling checkbox clicks,

You have handleCheckBox and a controlled component. We don't see what you do in the event handler but when it's controlled, you can check it by altering your sensors array (if in state/props) so s.roomId === values.id will be true.
If you don't want it to be controlled, you can probably use defaultChecked which will let you work with it in a different way.
see https://reactjs.org/docs/forms.html#controlled-components

import React, {Component} from 'react';
import axios from 'axios';
const Books = props=>(
<div className='form-group'>
<label>{props.book}
<input type='checkbox' name={props.name} className='form-check' onChange={props.onChange} />
</label>
</div>
)
class Total extends Component{
constructor(props){
super(props);
this.onChangeCheck = this.onChangeCheck.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state={
checkBoxes: [],
books:[]
}
}
componentDidMount() {
axios.get('http://localhost:3000/api/book/').then(resolve=>{
console.log(resolve.data.data);
this.setState({
books:resolve.data.data
}).catch(err=>{
console.log(err)
})
})
}
onChangeCheck(e){
console.log(e.target.name)
if(e.target.checked){
const array = this.state.checkBoxes;
array.push(e.target.name)
this.setState({
checkBoxes:array
})
}else{
const array = this.state.checkBoxes;
const index = array.indexOf(e.target.name);
console.log(index)
array.splice(index,1);
console.log(array);
this.setState({
checkBoxes:array
})
}
}
onSubmit(e){
e.preventDefault();
axios.put("http://localhost:8080/books/getTotal/",this.state.checkBoxes).then(resolve=>{
console.log(resolve)
alert(`Total price of books ${resolve.data}`);
}).catch(err=>{
console.log(err);
})
}
render(){
return(
<div className='card'>
<div className='card-header'>
</div>
<div className='card-body'>
<form className='form' onSubmit={this.onSubmit}>
<div className='form-group'>
{
this.state.books.map(object=>(
<Books name={object._id} book={object.name} onChange={this.onChangeCheck} />
)
)
}
</div>
<div className='form-group'>
<button type='submit' className='btn btn-success'>Get Total</button>
</div>
</form>
</div>
</div>
)
}
}
export default Total;

react.js - how to add element on success in dynamically generated button?

I have dynamically generated component with textfields and buttons. Each button do the ajax request. It's all working fine. However, I want to display the success message or error message on button itself, adding some icon on it. This is where I got stuck. I setup the flag and change the state, but it will change on all the buttons as expected. I also tried to change the current target, but the reference didn't work in success callback. Can someone please help me with this.
const FormGroup = ({index, type, field, value, onChange, spinner, isLoading, error, buttonType, brandList, handleBrandConfiguration, checkAvailability, handleCaseType, options, handlerRemoveItem})=> {
return(
<div>
<div className="form-group">
<label>{index}</label>
<input type="text"
name={field}
className="form-control"
value={value}
onChange={onChange}
/>
<select className="form-control" defaultValue="" onChange={handleBrandConfiguration}>
<option value="">Please select brand</option>
{brandList}
</select>
<select className="form-control" defaultValue="" onChange={handleCaseType}>
<option value="">Please select case template</option>
{options}
</select>
<button
type={buttonType}
className={classname(isLoading ? error ? "button button-danger" : "button button-success" : error ? "button button-danger" : "button button-primary")}
onClick={checkAvailability}>
<i className={classname(spinner ? error ? '': "fa fa-spinner fa-spin": '')}></i> {isLoading ? error ? 'Not Found' :<i className="fa fa-check fa-2" aria-hidden="true"></i> : error ? 'Not Found': 'Check Availability'}</button>
<input
type="button"
className="button button-danger"
value="Remove Item"
onClick={handlerRemoveItem}/>
</div>
</div>
);
};
Thanks

If you move your checkAvailability and result of api request to FormControl component you can set error and success for single component.
For Example:
class FormGroup extends React.Component{
constructor(props) {
super(props);
this.state = {
availabilityResult: null
};
}
callApi(username){
return(axios.get('https://api.github.com/users/' + username));
}
onChange(e){
this.setState({
itemCode: e.target.value
});
}
checkAvailability(e){
const username = this.state.itemCode;
let currentValue = e.currentTarget.value;
//ajax call goes here
this.callApi(username).then(response => {
const login = response.data.login;
this.setState({
availabilityResult: (login === 'mesmerize86')
});
}).catch(err => {
console.log(err);
});
}
render() {
const {index, field, value, handleRemoveItem} = this.props;
let inputState = '';
if (this.state.availabilityResult === true) inputState = 'button-success';
else if (this.state.availabilityResult === false) inputState = 'button-danger';
return(
<div className="form form-inline">
<div className="form-group">
<label>{index}</label>
<input type="text"
name={field}
className="form-control"
value={value}
onChange={this.onChange.bind(this)}
/>
<input
type="button"
className={`button button-primary ${inputState}`}
value="Check Availability"
onClick={this.checkAvailability.bind(this)} />
<input
type="button"
className="button button-danger"
value="Remove Item"/>
</div>
</div>
)
}
}
class Main extends React.Component {
constructor(props){
super(props);
this.state = {
rowList : [],
itemCodes: [],
itemCode: ''
}
}
handlerAddRow(){
const rowList = this.state.rowList.concat(FormGroup);
this.setState({ rowList });
}
handleRemoveItem(){
console.log('remove Item');
}
render(){
const rowList = this.state.rowList.map((row, index) => {
return (<FormGroup key={index} index={index+1} field={`"itemCode_"${index}`} />);
});
return(
<div className="container">
<input type="button" value="Add a row" className="button button-primary" onClick={this.handlerAddRow.bind(this)} /> <i class="fa fa-spinner" aria-hidden="true"></i>
{rowList}
</div>
);
}
}
ReactDOM.render(<Main />, document.getElementById('app'));