[solved] Redux Store initial value not displaying

I am trying to load an initial value from my redux store into an input that has this code

              <Form.Input
                type='number'
                placeholder='Custom Amount'
                name='donation_amount'
                id='custom_amount'
                value={store.donation_amount}
                defaultValue={store.donation_amount}
              />

The field loads blank unless I change store.donation_amount to a fixed number (which then shows).

Why is my initial state not showing? Here is my reducer code:

const starting_state = {
  log_to_console : 0,
  donation_amount : 34
};

const reducer = (previous_state = starting_state, action) => {
  switch (action.type) {
    case 'logToConsole':
      return { ...previous_state, log_to_console : previous_state.log_to_console + 1 };
    case 'set_donation_amount':
      return { ...previous_state, donation_amount: action.payload.donation_amount };
    default:
      return previous_state;
  }
};

export default createStore(reducer);

PS: adding this line to the component returns undefined:

  {console.log(store.donation_amount)}

Is it this.store you need?

It is in a presentational component so I don’t think the this keyword is needed.

Are you sure? Would be nice if you paste the entire component here :slight_smile:
Then we can debug better.
Also, try to always separete your reducers, initialState, store and actions. It’s better to debug and work with. If you start to do this know will be good for you in the future.

Other tip is: camelCase on your js, already read your post and you were using other pattern. camelCase is the “official” pattern on js. It’s better to read and work with.

camelCase it is from now on then! Here is my whole component SelectDonation.js

import React from "react";
import {css} from "emotion";
import {Button, Modal, Form, Input, Radio} from 'semantic-ui-react';
import store from "../reducer";

export default (props) => {

  const save_donation_amount = (e) => {
    // prevent pageload
    // grab the custom amount
    // add to state object
      // done in parent
    
    props.dispatch_set_donation_amount(34);
    console.log("donation_amount: ", store.getState().donation_amount);
    
  };

  return (
    <React.Fragment>
      {console.log(store.donation_amount)}
        <Modal.Header>Choose an amount</Modal.Header>
        <Modal.Content >
          <Form>      
              <Form.Input
                type='number'
                placeholder='Custom Amount'
                name='donation_amount'
                id='custom_amount'
                value={store.donation_amount}
                defaultValue={store.donation_amount}
              />
    
              <Button
                primary
                onClick={save_donation_amount}>Next Step
             </Button>

            
          </Form>
        </Modal.Content>
    </React.Fragment>
  )
}

Solved by adding a second arg to createStore:

export default createStore(reducer, starting_state)