React フォームのバリデーションを実装したい

前提・実現したいこと

ReactでTodoアプリを作成しています。
フォームに50文字以上入力されたら「50文字を超えています」というエラーメッセージを表示させたいです。

発生している問題・エラーメッセージ

1つ目のフォームに50文字以上入力した時、「50文字を超えています」のメッセージが表示されるのですが、2つ目のフォームに入力すると表示されたメッセージが消えてしまいます。
この問題を解消したいです。

該当のコードは下記になります。

ご教示頂けますと幸いです。宜しくお願い致します。

該当のソースコード

react
1import axios from "axios";
2import React from "react";
3import TextField from '@material-ui/core/TextField';
4import Button from '@material-ui/core/Button';
5
6class Form extends React.Component {
7  constructor(props) {
8    super(props);
9
10    this.state = {
11        list_one: "",
12        list_two: "",
13        list_three: "",
14        message:{
15          one: '',
16          two: '',
17          three: '',
18        }
19    };
20  }
21
22  handleChange = (e) => {
23    const name = e.target.name;
24    const value = e.target.value;
25    const id = e.target.id;
26    this.setState({
27      [name]: value,
28      message: {[id]: this.validator(id, value)}
29    });
30  };
31
32  validator(id, value){
33    switch (id) {
34      case 'one':
35      return this.validationOne(value);
36      case 'two':
37      return this.validationTwo(value);
38      case 'three':
39      default:
40    }
41  }
42
43  validationOne(value){
44    if (value.length > 50) return '50文字を超えています';
45  }
46
47  validationTwo(value){
48    if (value.length > 50) return '50文字を超えています';
49  }
50
51  validationThree(value){
52    if (value.length > 50) return '50文字を超えています';
53  }
54
55  handleClick = (e) => {
56    e.preventDefault();
57    let data = {
58      "list_one": this.state.list_one,
59      "list_two": this.state.list_two,
60      "list_three": this.state.list_three,
61    };
62    axios.post("http://hoge", data)
63    .then((res) => {
64      this.props.history.push("/");
65    })
66    .catch(error => {
67      console.log(error.response)
68    });
69  };
70
71  render() {
72    return (
73      <div>
74        <form onSubmit={this.handleClick}>
75          <TextField
76            variant="outlined"
77            onChange={this.handleChange}
78            name="list_one" type="text"
79            value={this.state.list_one}
80            id='one'
81          />
82          <p>{this.state.message.one}</p>
83          {this.state.list_one && <TextField
84            variant="outlined"
85            onChange={this.handleChange}
86            name="list_two"
87            type="text"
88            value={this.state.list_two}
89            id='two'
90          />}
91          <p>{this.state.message.two}</p>
92          {this.state.list_two && <TextField
93            variant="outlined"
94            onChange={this.handleChange}
95            name="list_three"
96            type="text"
97            value={this.state.list_three}
98            id='three'
99          />}
100          <p>{this.state.message.three}</p>
101          <Button
102            type='submit'
103            variant='contained'
104            color='primary'
105            disabled={!this.state.list_one}
106          >
107            Entry
108          </Button>
109        </form>
110      </div>
111    );
112  }
113}
114
115export default Form;

行動規範の内容に同意します

回答1件

自己解決

stateでエラーメッセージを管理するのではなく、50文字以上の時にエラー文をreturnする関数をrender内で呼び出すことで実現できました。

React
1import axios from "axios";
2import React from "react";
3import TextField from '@material-ui/core/TextField';
4import Button from '@material-ui/core/Button';
5
6class Form extends React.Component {
7  constructor(props) {
8    super(props);
9
10    this.state = {
11        list_one: "",
12        list_two: "",
13        list_three: ""
14        }
15    };
16  }
17
18  handleChange = (e) => {
19    const name = e.target.name;
20    const value = e.target.value;
21    this.setState({[name]: value});
22  };
23
24  validationOne(){
25    if (this.state.list_one.length > 50) return '50文字を超えています';
26  }
27
28  validationTwo(){
29    if (this.state.list_two.length > 50) return '50文字を超えています';
30  }
31
32  validationThree(){
33    if (this.state.list_three.length > 50) return '50文字を超えています';
34  }
35
36  handleClick = (e) => {
37    e.preventDefault();
38    let data = {
39      "list_one": this.state.list_one,
40      "list_two": this.state.list_two,
41      "list_three": this.state.list_three,
42    };
43    axios.post("http://hoge", data)
44    .then((res) => {
45      this.props.history.push("/");
46    })
47    .catch(error => {
48      console.log(error.response)
49    });
50  };
51
52  render() {
53    return (
54      <div>
55        <form onSubmit={this.handleClick}>
56          <TextField
57            variant="outlined"
58            onChange={this.handleChange}
59            name="list_one" type="text"
60            value={this.state.list_one}
61            id='one'
62          />
63          <p>{this.validationOne()}</p>
64          {this.state.list_one && <TextField
65            variant="outlined"
66            onChange={this.handleChange}
67            name="list_two"
68            type="text"
69            value={this.state.list_two}
70            id='two'
71          />}
72          <p>{this.validationTwo()}</p>
73          {this.state.list_two && <TextField
74            variant="outlined"
75            onChange={this.handleChange}
76            name="list_three"
77            type="text"
78            value={this.state.list_three}
79            id='three'
80          />}
81          <p>{this.validationThree()}</p>
82          <Button
83            type='submit'
84            variant='contained'
85            color='primary'
86            disabled={!this.state.list_one}
87          >
88            Entry
89          </Button>
90        </form>
91      </div>
92    );
93  }
94}
95
96export default Form;