How to check each state value automatically and setState - reactjs

Question

How to check if each state has value then combine all values?
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
inputvalue : '',
allval: ''
}
}
onChangeOfInput =(name,value) =>{
this.setState({
[name]: value
});
}
getValues = () =>{
console.log(this.state);
if(this.state.Title1) {
this.setState({
allval: this.state.allval+this.state.Title1
});
}
}
render() {
return (
<div className="hello">
<Input onChangeOfInput={this.onChangeOfInput}
placeholder="Title 1" name="Title1" />
<br/>
<Input placeholder="Title 2" name="Title2" onChangeOfInput={this.onChangeOfInput} />
<br/>
<Input placeholder="Title 3" name="Title3" onChangeOfInput={this.onChangeOfInput}/>
<br/>
<Input placeholder="Title 4" name="Title4" onChangeOfInput={this.onChangeOfInput}/>
<br/>
<button onClick={this.getValues}>Get value</button>
</div>
)
}
}
class Input extends React.Component {
constructor(props) {
super(props)
this.state = {
inputvalue: ''
}
}
handleChange(e) {
this.setState({
inputvalue: e.target.value
});
this.props.onChangeOfInput(this.props.name,e.target.value)
}
render() {
return (
<input
type="text"
placeholder={this.props.placeholder}
value={this.state.inputvalue}
onChange={this.handleChange.bind(this)}
/>
)
}
}
ReactDOM.render(<App />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
jsfiddle: https://jsfiddle.net/vxm2ojLz/
The issue is here, I need to check each value state.Title1, state.Title2, state.Title3, state.Title4 if they are not empty, then I want to combine all values if it is not empty and assign the combined values to allVal, how to combine all values to allval? Thanks

Answer 1

You need to be doing something like this.
getValues = () => {
console.log(this.state);
let combinedString = "";
Object.keys(this.state)
.map( igKey => {
if(this.state[igKey] != "" && igKey.includes('Title')){
combinedString = combinedString +''+ this.state[igKey];
return combinedString
}
});
this.setState({allval:combinedString})
console.log(combinedString);
}
working fiddle https://jsfiddle.net/2nhc6drm/
hope this helps!

Answer 2

Try handling getValues like this:
getValues = () =>{
console.log(this.state);
let result = [];
Object.keys(this.state).forEach(key => {
if (key.includes('Title') && this.state[key]) result.push(`${key}: ${this.state[key]}`);
})
this.setState({
allval: result.join('; ')
})
}

Answer 3

Please Update getValues method :-
For concatination,it will ignore the keys allval and inputval.
getValues = () => {
let allval = ''
for(let key of Object.keys(this.state)){
if(key==='allval' || key==='inputval'){
continue;
}
else{
let value=this.state[key];
console.log(value);
if(value===''){
}
else{
allval=allval+value;
}
console.log(allval);
}
}
this.setState({allval:allval})
}
Working SandBox :- https://codesandbox.io/s/vqoxo9w1wy
Hope this helps,
Cheers !!

Answer 4

I'd recommend to use reduce for combinde the values, and use the functional setState to avoid double state change:
class App extends React.Component {
state = {
allVal: '',
title1: '',
title2: ''
}
getValues = (prevState, name, newVal) => {
return Object.keys(prevState)
.reduce((acc, key) => {
if (key === 'allVal') return acc;
if (key === name) return acc + newVal;
return acc + prevState[key];
}, '')
}
handleChange = ({ target: { name, value } }) => {
this.setState(prevState => ({
[name]: value,
allVal: this.getValues(prevState, name, value)
}))
}
render(){
const { title1, title2, allVal } = this.state;
return (
<div>
<input name="title1" onChange={this.handleChange} value={title1} /><br />
<input name="title2" onChange={this.handleChange} value={title2} /><br />
allVal: <span>{allVal}</span>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>