Is there a way to shorten this validation script involving setState?

Question

I try to do a function that determine if a state is empty what i do so far is

const {  startDate, endDate ,classname} = this.state;

if(!startDate || !endDate || !selectedRoom || !selectedTrainer || !classname){

    if(!classname){
      this.setState({classnamevalid : 'errorBorder_Invalid'});
     } else {
      this.setState({classnamevalid : ''});
     }
     if(!startDate){
      this.setState({startDatevalid : 'errorBorder_Invalid'});
     }else{
      this.setState({startDatevalid : ''});
     }
     if(!endDate){
      this.setState({endDatevalid : 'errorBorder_Invalid'});
     } else {
      this.setState({endDatevalid : ''});
     }

} else {

  console.log(proceed)
}

what i did so far is , and as i thought it wont work. "i know its stupid "

if(!startDate || !endDate || !selectedRoom || !selectedTrainer || !classname){

    const validation = ["startDate", "endDate" ,"classname"];
    var i;
    for (i = 0; i < validation.length; i++) {

      if(!this.state.validation[i]){
          this.setState({validation[i] : 'errorBorder_Invalid'});
      } else {
          this.setState({validation[i] : ''});
      }

    }

} else {

  console.log(proceed)
}

You [can make it work](https://stackoverflow.com/questions/2274242/using-a-variable-for-a-javascript-object-key) though — Bergi, Sep 25 '19 at 00:12
i tried it but it throw me an error upon my if statement that i guess it cant read the ( this.state.validation[i] ) — hero to zero, Sep 25 '19 at 00:23

Will · Accepted Answer · 2019-09-25T00:52:49.973

I think you can get away with something like this using the conditional operator.

const { startDate, endDate, classname } = this.state;

if (!startDate || !endDate || !selectedRoom || !selectedTrainer || !classname) return console.log(proceed);

this.setState({ classnamevalid: !classname ? "errorBorder_Invalid" : "" });
this.setState({ startDatevalid: !startDate ? "errorBorder_Invalid" : "" });
this.setState({ endDatevalid: !endDate ? "errorBorder_Invalid" : "" });

/* or get super-funky */

const { startDate, endDate, classname } = this.state;
if (!startDate || !endDate || !selectedRoom || !selectedTrainer || !classname) return console.log(proceed);
[classname, startDate, endDate].forEach( prop => this.setState({ [`${prop}valid`]: !prop ? "errorBorder_Invalid" : "" }));

score 0 · Answer 2 · answered Sep 25 '19 at 04:35

I would like to suggest my approach as below;

const {  startDate, endDate ,classname} = this.state;

if(!startDate || !endDate || !selectedRoom || !selectedTrainer || !classname){
  this.setState({
    [`${!classname ? 'classnamevalid' : 'classnametmp'}`]: 'errorBorder_Invalid',
    [`${classname ? 'classnamevalid' : 'classnametmp'}`]: '',
    [`${!startDate ? 'startDatevalid' : 'startDatetmp'}`]: 'errorBorder_Invalid',
    [`${startDate ? 'startDatevalid' : 'startDatetmp'}`]: '',
    [`${!endDate ? 'endDatevalid' : 'endDatetmp'}`]: 'errorBorder_Invalid',
    [`${endDate ? 'endDatevalid' : 'endDatetmp'}`]: '',
  });
} else {
  console.log(proceed)
}

Firstly, I've focused on calling setState once in order to make less rendering.

Secondly, I added three states(classnametmp, startDatetmp and endDatetmp). If you use conditional operator without tmp state like following, [''] state can be duplicated and throw an error.

this.setState({
  [`${!classname ? 'classnamevalid' : ''}`]: 'errorBorder_Invalid',
  [`${classname ? 'classnamevalid' : ''}`]: '',
  [`${!startDate ? 'startDatevalid' : ''}`]: 'errorBorder_Invalid',
  [`${startDate ? 'startDatevalid' : ''}`]: '',
  [`${!endDate ? 'endDatevalid' : ''}`]: 'errorBorder_Invalid',
  [`${endDate ? 'endDatevalid' : ''}`]: '',
});

Of course, if you want to use iteration, reduce would be a good tool.

if(!startDate || !endDate || !selectedRoom || !selectedTrainer || !classname){
  const state = ["startDate", "endDate" ,"classname"].reduce((acc, ele) => {
      acc[`${ele}valid`] = !this.state[ele] ? 'errorBorder_Invalid' : '';
      return acc;
  }, {});

  this.setState(state);
}

Please, check above ways and leave comments if you have questions.

wow i dont even think that this will work this way thank you but as i tried the second approach work well but doesn't reverse the result (returning empty if the state have value) , ive tried to use the 3rd one it wasnt work but it throwing no error, thank you so much — hero to zero, Sep 25 '19 at 06:50
In terms of the second approach, I wrote that in order to let you know why I used classnametmp, startDatetmp, endDatetmp. I don't recommend to use that way. And, I've realised that we can't put object directly into setState. You can use function like this.setState((prevState) => {}). — Misol Goh, Sep 26 '19 at 14:02

Is there a way to shorten this validation script involving setState?

2 Answers2