javascript - Warning: Failed prop type: The prop `value` is marked as required in `TextInput`, but its value is `undefined` - St

admin管理员组

文章数量:1278981

This is the error which shows on my google chrome browser console:

Warning: Failed prop type: The prop value is marked as required in TextInput, but its value is undefined.

Here's the code:

text-input.jsx

import React from 'react';
import PropTypes from 'prop-types';

const TextInput = (props) => (
<div className="form-group">
    <label htmlFor={props.name}>{props.label}</label>
    <input 
        className="form-control mb-2"
        type={props.type}
        name={props.name}
        id={props.name}
        value={props.value}
        placeholder={props.placeholder}
        onChange={props.onChange}
    />
</div>
);

TextInput.propTypes = {
type: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
value: PropTypes.string.isRequired,
placeholder: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
label: PropTypes.string.isRequired,
}

TextInput.defaultProps = {
type:'text',
placeholder: '',
}

export default TextInput;

form.jsx

import React from 'react';
import PropTypes from 'prop-types';
import TextInput from './text-input';

const Form = (props) => (
<form onSubmit={props.handleSubmit}>
    <TextInput
        name="name"
        value={props.values.name}
        label="Enter Name"
        placeholder="Enter Your Name"
        onChange={props.handleChange}
    />
    <TextInput
        type="email"
        name="email"
        value={props.values.eamil}
        label="Enter Email"
        placeholder="Enter Your Email"
        onChange={props.handleChange}
    />
    <TextInput
        type="password"
        name="password"
        value={props.values.password}
        label="Enter Password"
        placeholder="Enter Your password"
        onChange={props.handleChange}
    />
    <button className="btn btn-danger" type="submit">Submit</button>
</form>
);

Form.propTypes = {
values: PropTypes.object.isRequired,
handleChange: PropTypes.func.isRequired,
handleSubmit: PropTypes.func.isRequired
}

export default Form;

Where is the problem and How can I find out the problem?

This is the error which shows on my google chrome browser console:

Warning: Failed prop type: The prop value is marked as required in TextInput, but its value is undefined.

Here's the code:

text-input.jsx

import React from 'react';
import PropTypes from 'prop-types';

const TextInput = (props) => (
<div className="form-group">
    <label htmlFor={props.name}>{props.label}</label>
    <input 
        className="form-control mb-2"
        type={props.type}
        name={props.name}
        id={props.name}
        value={props.value}
        placeholder={props.placeholder}
        onChange={props.onChange}
    />
</div>
);

TextInput.propTypes = {
type: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
value: PropTypes.string.isRequired,
placeholder: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
label: PropTypes.string.isRequired,
}

TextInput.defaultProps = {
type:'text',
placeholder: '',
}

export default TextInput;

form.jsx

import React from 'react';
import PropTypes from 'prop-types';
import TextInput from './text-input';

const Form = (props) => (
<form onSubmit={props.handleSubmit}>
    <TextInput
        name="name"
        value={props.values.name}
        label="Enter Name"
        placeholder="Enter Your Name"
        onChange={props.handleChange}
    />
    <TextInput
        type="email"
        name="email"
        value={props.values.eamil}
        label="Enter Email"
        placeholder="Enter Your Email"
        onChange={props.handleChange}
    />
    <TextInput
        type="password"
        name="password"
        value={props.values.password}
        label="Enter Password"
        placeholder="Enter Your password"
        onChange={props.handleChange}
    />
    <button className="btn btn-danger" type="submit">Submit</button>
</form>
);

Form.propTypes = {
values: PropTypes.object.isRequired,
handleChange: PropTypes.func.isRequired,
handleSubmit: PropTypes.func.isRequired
}

export default Form;

Where is the problem and How can I find out the problem?

• javascript
• reactjs

Share Improve this question Follow edited Jul 21, 2021 at 4:13 Majid M. 4,97411 gold badge1616 silver badges3434 bronze badges asked Jul 20, 2021 at 20:35 Simanto RoySimanto Roy 3111 gold badge11 silver badge22 bronze badges 1

• Please show where you are rendering Form when this error message occurs. It looks like its values prop is missing a value for one or more of the name, email and password properties. – Robin Zigmond Commented Jul 20, 2021 at 20:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

This line has a typo on the email prop:

 value={props.values.eamil}

should be

  value={props.values.email}

The most likely case is that your props.value.name etc are originally undefined. In that case, you are passing undefined as the value prop to your TextInput ponent, hence the error.

本文标签：