Develop Reference

How to initialize the value of state on the basis of props and then change the state on dropdown selection in React?

I have a component with a dropdown having two options. 'Existing Members' and 'Add New Member'.
If the value of a props.existingMembers.length > 0. No default value should be selected in dropdown.
However if the props.existingMembers.length === 0. 'Add New Member' should be selected as the default value in dropdown.
In ComponentDidMount I am making an API call with the help of which props.existingMembers is fetched. Since props.existingMembers always have length 0 in first render(Before API call). I am unable to achieve above requirement.
class AssignOwnershipDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
dropDownValue: '',
};
}
componentDidMount() {
fetchExistingMembersList();
}
static getDerivedStateFromProps(props, state) {
if (props.existingMembers.length === 0) {
return {
dropDownValue: 'Add New'
};
}
if (props.existingMembers.length === 0) {
return {
dropDownValue: ''
};
}
}
handleDropDownSelection = (dropDownValue) => {
this.setState({
dropDownValue
});
}
render() {
const {dropDownValue}=this.state;
return ( <React.Fragment>
<Select value = {dropDownValue}
onChange = {(e) => this.handleDropDownSelection(e.target.value)}>
<MenuItem value = "Add New" key = {0}> Add New </MenuItem>
<MenuItem value = "Existing Member" key = {1}> Existing Member </MenuItem>
</Select>
</React.Fragment>
);
}
}
The above approach seems to be not working as the value of dropdown is not changing

You can add an item with empty value so if the state is empty nothing will be shown in dropdown
there is a minor mistake
static getDerivedStateFromProps(props, state) {
if (props.existingMembers.length === 0) {
return {
dropDownValue: 'Add New'
};
}
// mistake
if (props.existingMembers.length > 0) {
return {
dropDownValue: ''
};
}
}

React App Clickhandler Validation Problem

I'm trying to fetch data from json server and validate it with the value entered into input fields.
If the fetched data and input data are the same it needs to add a div between fields and description text.
I've already created that component too and i think its ok.
I have already set the onChangeHandler but OnClickHandler i didin't accomplish the validation between inputs and related json fields.
Maybe i need to use a loop for validation ?
import React, { Component } from 'react';
import TextField from '#material-ui/core/TextField';
import styled from 'styled-components';
import ApplyButton from '../ApplyButton/ApplyButton';
import axios from 'axios';
import IsApplied from '../IsApplied/IsApplied';
const NumberContainer = styled.div`
margin-top: 10px;
`;
export default class NumberBox extends Component {
constructor(props) {
super(props);
this.state = {
giftcards: [],
first: '',
second: '',
isSeen: false
};
this.onClickHandler = this.onClickHandler.bind(this);
this.onHandleChange = this.onHandleChange.bind(this);
}
onHandleChange (property) {
return e => {
this.setState({
[property]: e.target.value
});
};
}
async componentDidMount() {
const response = await axios.get('http://localhost:3001/giftcards')
const giftcards = response.data
this.setState({giftcards: giftcards})
}
onClickHandler() {
if (this.state.first === this.state.giftcards.cardnumber &&
this.state.second === this.state.giftcards.control) {
return alert("correct") & this.setState({isSeen:true})
} else if (this.state.first.length === 0 &&
this.state.second.length === 0) {
return alert("error")
} else {
return alert("enter correct number") & console.log(this.state.giftcards)
}
}
render() {
let resultsbox;
if (this.state.isSeen) {
resultsbox = <IsApplied cardno={this.state.first}/>;
} else {
resultsbox = null;
}
return (
<NumberContainer>
{resultsbox}
<TextField
style={{ margin: 8, width: 430 }}
margin="normal"
variant="outlined"
type="search"
label="Gift Card Number"
value={this.state.first}
name="cardNomber"
onChange={this.onHandleChange('first')}
/>
<TextField
style={{ margin: 8, width: 200}}
margin="normal"
variant="outlined"
type="search"
label="Control Code"
value={this.state.second}
name="controlCoder"
onChange={this.onHandleChange('second')}
/>
<ApplyButton handle={this.onClickHandler}/>
</NumberContainer>
)
}
}
{
"giftcards": [
{
"cardnumber": "5078282848878291861",
"control": "175"
},
{
"cardnumber": "6435047555924007105",
"control": "201"
}
]
}
I'm getting undefined for this.state.giftcards.cardnumber & this.state.giftcards.control while checking with console.log

this.setState({giftcards: giftcards}).
You're setting giftcards state-value equal to an object. That JSON object has a key of giftcards. So at the minimum your condition in onClickHandler has to be something like :
if(this.state.first === this.state.giftcards.giftcards[index]){
....
}
Since the key giftcards, has an array for its value, you also have to decide which item in the array you want it to check against like this.state.giftcards.giftcards[0].cardnumber...
However, it sounds more like you just want to filter some data to determine whether the user entered the exact same information of a card.
We can use array.filter() to return any giftcards that match your user inputs. If any, then we will set isSeen to be true. Try doing something like this for onClickHandler():
onClickHandler(){
const { giftcards, first, second } = this.state
const matchingGiftCards = giftcards.filter((card) => {
return card.cardnumber == first && card.control == second
})
//if there are any matching giftcards we will set isSeen to tru
if(matchingGiftCards.length > 0){
this.setState({isSeen:true})
}
}

React Native - Unable to pass CheckBox value to another screen

I'm here to ask what's your idea to properly pass a CheckBox value to other screen?
Example, if a user checks a CheckBox then proceed to the Next Screen the value of the CheckBox should be displayed in that screen.
But in my code, my console.log gives an output of false(I don't understand why) and once I get to the next screen the state doesn't really pass because it's display is blank.
Here's my code
export default class tables extends Component {
constructor(props){
super(props)
this.state = {
...
check: {},
tbl_Merge: []
}
}
proceed_TO_Category = () => {
this.props.navigation.navigate('Category', {
userName : this.state.userName,
DineIn : this.state.DineIn,
tbl : this.state.tbl,
tbl_2nd : this.state.tbl_2nd,
tbl_Merge : this.state.tbl_Merge
});
console.log("CHECK ======> "+ this.state.tbl_Merge);
}
checkBox_Test = (table_NO) => {
const tbl_Merge = this.state.tbl_Merge;
const checkCopy = {...this.state.check}
if (checkCopy[table_NO]) {
checkCopy[table_NO] = false;
} else {
checkCopy[table_NO] = true;
}
this.setState({ check: checkCopy });
this.setState({ tbl_Merge: table_NO == this.state.tbl_Merge });
}
render() {
return(
<View>
....
<Flatlist
....
<CheckBox
value = { this.state.check[item.tbl_id] }
onChange = {() => this.checkBox_Test(item.tbl_id) }
/>
....
/>
....
<View>
<TouchableOpacity
onPress = {() => this.proceed_TO_Category()}>
<Text>Categories</Text>
</TouchableOpacity>
</View>
<View/>
)
}
}
Screen shot of Console.log in my proceed_TO_Category.

checkBox_Test = (table_NO) => {
const tbl_Merge = this.state.tbl_Merge;
const checkCopy = {...this.state.check}
if (checkCopy[table_NO]) {
checkCopy[table_NO] = false;
} else {
checkCopy[table_NO] = true;
}
this.setState({ check: checkCopy, tbl_Merge: table_NO == this.state.tbl_Merge }); // 1. Edit
}
Edit: We should not use setState consecutively. Because setState is async func. If you want to call a function after setState process with the help of callback function,setState(update, callback);
you defined tbl_Merge as an array, but while you set it to state, you set it as a boolean.

Component only updates after two clicks React

I am building a React app that - among other things - generates a random number when a button is clicked and then filters an array of JSON objects to only the one at the index of that random number (i.e. JSON[random]). Normally the app is supposed to re-render after the array of JSON objects is filtered, but for some reason, on the first time the button is clicked and a random is picked, it requires two clicks to update. From then on it updates as expected, with a new random rendering each time the button is clicked.
I'm not sure if the problem is coming from App.js or somewhere lower down. On the first click, it generates a new random and supposedly saves this to state, but fails to re-render right away. On subsequent clicks, things seem to update based on the previously-generated random, while a new random is put in the queue. I would prefer the this all happens in one go: click, generate random, save to state, update to reflect the new random à la JSON[random].
This might have something to do with the way I have implemented lifecycle methods, as I'm admittedly not sure of all the nuances of each and have just tried to use whichever ones seemed to do what I wanted. If you have any suggestions there, please let me know...
Thanks!
Here are the relevant files:
App.js - where the random is generated and stored when a new click is registered in Header.state.randomClicks
class App extends Component {
constructor(props){
super(props)
this.state = {headerLink: "", searchValue: "", random: 0, randomClicks: 0}
this.generateRandom = this.generateRandom.bind(this);
}
getLinkFromHeader = (link) => {
if (this.state.headerLink !== link) {
this.setState({
headerLink: link,
})
}
}
getSearchValueFromHeader = (string) => {
this.setState({
searchValue: string,
});
}
getRandomMax = (max) => {
this.setState({
randomMax: max,
})
}
getRandomClicks = (value) => {
this.setState({
randomClicks: value,
})
}
generateRandom(number) {
let random = Math.floor(Math.random() * number) + 1;
console.log("generateRandom = ", random)
return random
}
shouldComponentUpdate(nextProps, nextState) {
return this.state.randomClicks !== nextState.randomClicks;
}
componentWillUpdate() {}
componentDidUpdate(prevState) {
let randomClicks = this.state.randomClicks;
console.log("this.state.randomClicks: ", this.state.randomClicks)
// console.log("prevState: ", prevState)
// console.log("prevState.randomClicks = ", prevState.randomClicks)
// ^^ is this a bug ? ^^
let random = this.generateRandom(this.state.randomMax);
if (this.state.random !== random) {
this.setState({random: random})
}
}
render() {
return (
<div className="App background">
<div className="content">
<Header getLinkFromHeader={this.getLinkFromHeader} getSearchValueFromHeader={this.getSearchValueFromHeader} randomClick={this.randomClick} getRandomClicks={this.getRandomClicks}/>
<TilesContainer link={this.state.headerLink} searchValue={this.state.searchValue} getRandomMax={this.getRandomMax} random={this.state.random} randomClicks={this.state.randomClicks}/>
</div>
</div>
);
}
}
export default App
Header.js* - where the randomClick count is incremented each time RandomButton is clicked
class Header extends Component {
constructor(props){
super(props);
this.state = { selectorLink: "", searchValue: "", randomClicks: 0 }
this.randomClick = this.randomClick.bind(this);
}
getLinkFromSelector = (link) => {
this.setState({
selectorLink: link,
})
}
getSearchValue = (string) => {
this.setState({
searchValue: string,
})
}
shouldComponentUpdate(nextProps, nextState) {
console.log("this.state !== nextState: ", this.state !== nextState)
return this.state !== nextState;
}
componentDidUpdate(previousState){
if(this.state.selectorLink !== previousState.selectorLink) {
this.props.getLinkFromHeader(this.state.selectorLink);
}
this.props.getSearchValueFromHeader(this.state.searchValue);
this.props.getRandomClicks(this.state.randomClicks);
console.log("Header Did Update")
}
randomClick(){
this.props.randomClick;
this.setState({
randomClicks: this.state.randomClicks += 1,
});
}
render(){
return(
<div id="header" className="header">
<div className="title-div">
<div className="h1-wrapper title-wrapper">
<h1>Pokédex Viewer App</h1>
</div>
</div>
<PokedexSelector getLinkFromSelector={this.getLinkFromSelector}/>
<SearchBar getSearchValue={this.getSearchValue}/>
<button type="button" id="random-button" onClick={this.randomClick}>Random Pokémon</button>
<button type="button" id="show-all-button" onClick={this.showAllClick}>Show All</button>
</div>
)
}
}
export default Header
TilesContainer.js - where the random number from App is sent and the tiles list is filtered/re-rendered
class TilesContainer extends Component {
constructor(props){
super(props);
this.state = {
pokemon: [],
filteredPokemon: [],
randomMax: 0,
showDetails: false,
};
this.getPokemon = this.getPokemon.bind(this);
this.tiles = this.tiles.bind(this);
this.getPokemon(this.props.link);
}
getPokemon(pokedexLink) {
let link = "";
(pokedexLink === "")
? link = "https://pokeapi.co/api/v2/pokedex/national/"
: link = this.props.link;
fetch(link)
.then(response => response.json())
.then(myJson => {
let list = myJson['pokemon_entries'];
this.setState({
pokemon: list,
randomMax: list.length,
})
this.props.getRandomMax; // send randomMax to App
})
}
filterPokemon(string) {
if (string !== "") {
console.log("string: ", string)
string = string.toString().toLowerCase()
let filteredPokemon = this.state.pokemon.filter(pokemon => {
const name = pokemon.pokemon_species.name;
const nameStr = name.slice(0,string.length);
const number = pokemon.entry_number;
const numberStr = number.toString().slice(0, string.length);
return (this.state.random !== 0) ? number.toString() === string : nameStr === string || numberStr === string;
})
if (this.props.randomClicks !== 0) { // i.e. using a random
this.setState({
filteredPokemon: filteredPokemon,
})
} else {
this.setState({
filteredPokemon: filteredPokemon,
randomMax: filteredPokemon.length,
})
}
} else {
this.setState({
filteredPokemon: [],
randomMax: this.state.pokemon.length,
})
}
}
componentDidUpdate(prevProps, prevState) {
if (this.props.link !== prevProps.link) {
this.getPokemon(this.props.link)
}
if (this.props.searchValue !== prevProps.searchValue) {
this.filterPokemon(this.props.searchValue)
}
if (this.state.randomMax !== prevState.randomMax){
this.props.getRandomMax(this.state.randomMax);
}
if (this.props.random !== prevProps.random) {
console.log("TilesContainer random: ", this.props.random)
this.filterPokemon(this.props.random)
}
}
tiles() {
console.log("tiles() filteredPokemon: ", this.state.filteredPokemon)
console.log("tiles() searchValue: ", this.props.searchValue)
console.log("tiles() random: ", this.props.random)
if (this.state.pokemon.length > 0) {
if (this.state.filteredPokemon.length == 0 && this.props.searchValue === ""){
return (
this.state.pokemon.map(pokemon => (
<Tile key={pokemon.entry_number} number={pokemon.entry_number} name={pokemon.pokemon_species.name} url={pokemon.pokemon_species.url}/>
))
)
} else if (this.state.filteredPokemon.length > 0){
return (
this.state.filteredPokemon.map(pokemon => (
<Tile key={pokemon.entry_number} number={pokemon.entry_number} name={pokemon.pokemon_species.name} url={pokemon.pokemon_species.url}/>
))
)
}
}
}
render(){
return (
<div id="tiles-container"
className="tiles-container">
{this.tiles()}
</div>
)
}
}
export default TilesContainer

You should not use current state in setState and should not modify state directly. And you do no actually call this.props.randomClick and it is undefined. Change
randomClick(){
this.props.randomClick;
this.setState({
randomClicks: this.state.randomClicks += 1,
});
}
to
randomClick(){
if (typeof(this.props.randomClick) === 'function') this.props.randomClick();
this.setState(olState => ({
randomClicks: olState.randomClicks + 1,
}));
}
Also check your shouldComponentUpdate methods. They might be buggy or redundant. Looks like you prevent updating App when state.random changes. So every time you click the button you store the new random value but use the previous one. So for the initial render and for the first click you use random: 0.
And I guess that getRandomClicks should be setRandomClicks.

react input validation checking against last entered value instead of current value

I'm trying to validate my input , if the number is between 100 and 200 is should display valid or invalid , the problem i'm having is that it seems to be checking against the last entered value, so for instance if the user enters 1222 this will display valid as I believe it is actually checking against the last entered number of 122 and also if I then delete 2 charachers so it displays 12 this will also display valid. I believe this is because of how the state is set but I am not sure how to correctly get this to work.
How can I change this so it will check against the correct value and validate correctly?
Textbox.js
class TextBox extends React.Component {
state = {
valid: '',
value: ''
}
onChange = (event) => {
this.props.onChange(event.target.value);
this.validation()
}
validation() {
(this.props.value > 100 && this.props.value < 200) ? this.setState({value: this.props.value}) : this.setState({value: this.props.value})
}
onChangeInput(e) {
const { name, value } = e.target;
this.setState({
[name]: value
}, () => console.log(this.state.mail === this.state.confMail));
}
render() {
return (
<Box
invalid={!this.props.isValid}
>
<Label
rollo={this.props.designation === 'rollo'}
pleating={this.props.designation === 'pleating'}
>{this.props.label}</Label>
<span>
<Input
type={this.props.type && this.props.type}
defaultValue={this.props.defaultValue}
onChange={this.onChange}
placeholder={this.props.placeholder}
value={this.props.value || ''}
/>
<Tooltip>{this.state.valid}</Tooltip>
</span>
</Box>
);
}
};
export default TextBox;
component.js
<TextBox
type="number"
label="Fenstertyp"
defaultValue={ this.props.height / 100 * 66 }
onChange={newValue => this.props.selectOperationChainLength(newValue)}
tooltip="invalid"
value={this.props.operationChainLength.value}
/>
actions.js
export function selectOperationChainLength(operationChainLength) {
return {
type: SELECT_OPERATION_CHAIN_LENGTH,
operationChainLength
}
}

You can shift the validation logic to onChange method on event.target.value, there is no need to create the separate method. It will then look like this.
class TextBox extends React.Component {
state = {
valid: false,
value: ''
}
onChange = (event) => {
const value = event.target.value;
(value > 100 && value < 200) ? this.setState({value, valid: true}) : this.setState({value, valid: false})
this.props.onChange(value);
}
onChangeInput(e) {
const { name, value } = e.target;
this.setState({
[name]: value
}, () => console.log(this.state.mail === this.state.confMail));
}
render() {
return (
<Box
invalid={!this.props.isValid}
>
<Label
rollo={this.props.designation === 'rollo'}
pleating={this.props.designation === 'pleating'}
>{this.props.label}</Label>
<span>
<Input
type={this.props.type && this.props.type}
defaultValue={this.props.defaultValue}
onChange={this.onChange}
placeholder={this.props.placeholder}
value={this.props.value || ''}
/>
<Tooltip>{this.state.valid}</Tooltip>
</span>
</Box>
);
}
};
export default TextBox;

Ok, so there are some things going wrong here.
import React, { Component } from "react";
import { render } from "react-dom";
class TextBox extends Component {
constructor(props){
super(props);
// 1.
// You only need to store the `isValid` property.
// The value is needed only for the validation, right?
this.state = {
isValid: false
}
}
onChange(e) {
const { target } = e;
const { value } = target;
// 2.
// If the value is in the right range : isValid = true
// else : isValid = false
if( value > 100 && value < 200 ) {
this.setState({ isValid: true });
} else {
this.setState({ isValid: false });
}
}
render() {
// 3.
// Always use destructuring. It's way easier to follow ;)
const { type } = this.props;
const { isValid } = this.state;
return (
<Fragment>
<input
type={type}
onChange={e => this.onChange(e)}
/>
{/* 4. */}
{/* Assign the right text to your tooltip */}
<p>{ isValid ? "valid" : "invalid" }</p>
</Fragment>
);
}
}
ReactDOM.render(
<TextBox type="number" />,
document.getElementById('root')
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
I simplified the example so it can be easier to follow.
Here is a working example

I think you need to set your valid as false to begin with
state = {
valid: false,
value: ''
}