React - can't get data from Redux

Question

I'm attempting to load data from my state into my form and struggling.

I login and save email and token into Redux state. When I push to this test page that has a form inside it, I can't ever display the email inside the form. Why can't I load email? I am able to see it on TestPage.js but not on TestForm.

TestPage.js

import React from "react";
import PropTypes from 'prop-types'; 
import { connect } from "react-redux";
import TestForm from "../forms/TestForm";

class TestPage extends React.Component {

  render() {
    const { isAuthenticated, email } = this.props;
    return (
      <div>
        { isAuthenticated && <h1> { email } </h1> }
        <TestForm submit={this.submit} props={ this.props } />
      </div>
    );
  }
}

TestPage.propTypes = {
  email: PropTypes.string.isRequired,
  isAuthenticated : PropTypes.bool.isRequired
};

function mapStateToProps(state){
    return {
      email : state.user.email,
      isAuthenticated : !!state.user.token
    };
};

export default connect (mapStateToProps )(TestPage);

TestForm.js

import React from 'react'
import { Form, Button } from "semantic-ui-react";
import { connect } from "react-redux";

class TestForm extends React.Component {
  state = {
    name : '',
    email : '',
    isActive : true
  }

  onSubmit = e => { 
    e.preventDefault();
    console.log("state = " + JSON.stringify(this.state));
  }

  componentDidMount(){
    this.setState(this.props);
    this.onInit(this.props);
    console.log(" this props email =  " + JSON.stringify(this.props));
    console.log(" this state email =  " + JSON.stringify(this.state.email ));
  }

  onInit = (props) => {
    console.log(" this props email =  " + JSON.stringify(this.props));
    console.log(" this state email =  " + JSON.stringify(this.state.email ));
  }


  render() {

    const { state, loading } = this;

    const { handleSubmit } = this.props;  
   return (
      <div>
        <Form onSubmit={this.onSubmit} loading={loading}>
          <Form.Field >
            <label htmlFor="email">Email</label>
            <input
              type="email"
              id="email"
              name="email"
              placeholder="[email protected]"
              value={this.state.data.email}
              onChange={this.onChange}
            />
          </Form.Field>
          <Button primary>Login</Button>
        </Form>
      </div>
    )
  }
};

function mapStateToProps(state){
    return {
      state : this.state
    };
}

export default connect(mapStateToProps)(TestForm);

Look inside your mapStateToProps function in the form, you do this.state, should be only state — EQuimper
– EQuimper, Commented May 4, 2018 at 14:23

Prince Hernandez · Accepted Answer · 2018-05-04 14:50:09Z

you have some errors and some useful things that you can improve, lets check them:

1) here you are setting this.props to props, that is not a good approach because it is confusing, actually you will have to access with this.props.props which is not the desired naming convention.

<TestForm submit={this.submit} props={ this.props } />

change it into this, use the spread operator.

<TestForm submit={this.submit} {...this.props } />

2) here, when you do this.setState(this.props); as I said on #1, you will be setting an object and your props would be inside props. so when you do this.state.email it should be this.state.props.email.

componentDidMount(){
    this.setState(this.props);
    this.onInit(this.props);
    console.log(" this props email =  " + JSON.stringify(this.props));
    console.log(" this state email =  " + JSON.stringify(this.state.email ));
  }

basically your props object would look like this:

{
    "handleSubmit": function, 
    "props": {
        "name" : '',
        "email" : '',
        "isActive" : true
      }
}

so mapping that directly to the state would make that this.state.email doesnt exist.

so, to fix this you need to use correctly your props, as I said, using props={something} on the component will mislead your usage inside the component and that is what is happening to you right now.

Collectives™ on Stack Overflow

React - can't get data from Redux

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related