How do I access state in a component's defaultProps in Reactjs

Question

I need to get the state of the component to be accessed by the defaultProps of a class, here is my code:

class Headcomponent extends React.Component {

    constructor(props) {

        super(props);
        this.state = {
            email: '',
            password: '',
            formErrors: {
                email: '',
                password: ''
            },
            emailValid: false,
            passwordValid: false,
            formValid: false,
            items: [],

        }
    }


    this.setState({
        formErrors: fieldValidationErrors,
        emailValid: emailValid,
        passwordValid: passwordValid
    }, this.validateForm);
}

validateForm() {
    this.setState({
        formValid: this.state.emailValid &&
            this.state.passwordValid
    });
}


render() {
    return ( <
        Form fields = {
            this.props.form
        }
        buttonText = "Submit" / >
    );
}
}    

Headcomponent.propTypes = {
    form: PropTypes.array,
};

Headcomponent.defaultProps = {
    form: [{
            label: 'label1',
            placeholder: 'Input 1',
            value: {
                this.state.password
            } //this throws an error
        },
        {
            label: 'label2',
            placeholder: 'Placeholder for Input 2',
        },
    ],
};

export default Headcomponent;

{this.state.password} throws an error because it is outside of the class. How do I get the state of password and pass it inside Headcomponent.defaultProps?

score 3 · Answer 1 · answered Feb 07 '18 at 10:11

3

I'm afraid you can't. getDefaultProps is called before the component is initiated. You cannot use state outside of the component like that.

answered Feb 07 '18 at 10:11

Arber Sylejmani

2,078
1
16
20

So what do you propose as a solution, how can I get the value of password to be in defaultProps? – Gherbi Hicham Feb 07 '18 at 10:13
I don't think you are getting my point, you don't have a password value at defaultProps, you'll never have one, as mentioned above, you can set it as a string (default password or something) but basically defaultProps is what you provide as default before everything else is rendered, so the moment react renders your password input will take the value of whatever you put there, which cannot be from it's state because at that point state is not even initiated yet. Another way would be to pass it down the props as mentioned above but that would still not be as a defaultProp but rather as a prop. – Arber Sylejmani Feb 07 '18 at 13:14

score 0 · Accepted Answer · answered Feb 07 '18 at 10:33

0

I don't fully understand what you are trying to do. Please explain.

If you are trying to set a default prop for something like a password field then you can just set it as a string value. If you want the default password prop to be 'password123' then set it to 'password123'.

As I try to understand this, it is unclear how you are setting this.state.password in your react component. You have a floating setState call in your constructor but it doesn't list the password.

It sounds like you are trying to set the default props to the value that someone will eventually type in a form, at some point in the future. You can't set the default to something someone decides in the future. That would require time travel.

answered Feb 07 '18 at 10:33

Josh Pittman

7,024
7
38
66

Ok now I understand that I can't use defaultProps to get the state of my password, what I'm doing here is trying to pass the value of my password in real time to another component outside this class and if the password is shorter than 5 characters then it shows an error message. I trioed this using a single class and it works but now I'm trying to use atomic design because the components I'm writing are getting big very quickly, so I'm trying to separate things up, any ideas on how to do this ? – Gherbi Hicham Feb 07 '18 at 10:41
If my answer answered your question please mark it correct. To clarify, do you want to understand how to pass state outside of your component or how to show an error message if a string is less than 5 characters? Open a new stack question for the one you need help with. – Josh Pittman Feb 07 '18 at 10:45
Exactly I want to pass the state of my component to another class, how do I go about doing that, the code I put doesn't change very much. – Gherbi Hicham Feb 07 '18 at 10:49
Yes, but you open a new question so that other people with the same problem can also find it in the future. If you are not using redux or mobx then the basic idea is to lift state up to the closest common ancestor https://reactjs.org/docs/lifting-state-up.html. It will be easier to explain in a response to a separate question than in a comment. – Josh Pittman Feb 07 '18 at 10:51
Ok here it is https://stackoverflow.com/questions/48662186/access-state-of-component-in-another-class – Gherbi Hicham Feb 07 '18 at 11:02

How do I access state in a component's defaultProps in Reactjs

2 Answers2