CODEWITHSUNDEEP
javascriptreactjsredux
Kentron.dna
Kentron.dna

Reputation: 193

How to render values received from REDUX

I have this simple example page test in ReactJS:

enter image description here

On change the new value of the select is sent to the STORE (REDUX).

This is the code:

import React, { Component, Fragment } from "react";
import { connect } from "react-redux";
import SelecionarCrypto from "./SelecionarCrypto";

  class PruebasAPI4 extends Component {

    constructor(props) {
      super(props);

    }

    render() {

      return (
        <Fragment>
          Test4
          <br></br>
          <br></br>
          <SelecionarCrypto />
          <br></br>

          Value of select (Typeof): {typeof this.props.selectvalue}
        <br></br>
        Value of select (props): {this.props.selectvalue}
        {console.log("Test inside retun value of this.props ",this.props )}
        <br></br>

        </Fragment>

    );
  }
}

const mapStateToProps = state => {
  console.log("mapStateToProps receives: ", state)
  return {
    token: state.token,
    ValorState: state.ValorState,
    username: state.username,
    selectvalue: state.value  // <<<---- This one 

  };
};


export default connect(mapStateToProps)(PruebasAPI4);

The value selected is received correctly inside the mapStateToProps

enter image description here

The page is not rendering when receiving new value from store and the value is always undefined.

enter image description here

How to map the received value and each time a change ocure render to see the value on the page??

Upvotes: 0

Views: 28

Answers (1)

Kostya Tresko
Kostya Tresko

Reputation: 854

I think there is a typo in your code. It should be:

const mapStateToProps = state => {
  return {
    ...
    selectvalue: state.selectvalue  // Instead of state.value

  };
};

Upvotes: 1

Related Questions