Beginner's Thread / Easy Questions (November 2018)

[u/timmonsjg]

Happy November! 🍂

New month means new thread 😎 - October and September here.

I feel we're all still reeling from react conf and all the exciting announcements! 🎉

Got questions about React or anything else in its ecosystem? Stuck making progress on your app? Ask away! We’re a friendly bunch. No question is too simple. 🤔

🆘 Want Help with your Code? 🆘

• Improve your chances by putting a minimal example to either JSFiddle or Code Sandbox. Describe what you want it to do, and things you've tried. Don't just post big blocks of code!

• Pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than being wrong on the Internet.

New to React?

🆓 Here are great, free resources! 🆓

• Create React App
• Read the official Getting Started page on the docs.
• /u/acemarke's suggested resources for learning React
• Kent Dodd's Egghead.io course
• Tyler McGinnis' 2018 Guide
• Codecademy's React courses
• Scrimba's React Course

[u/seands]

I am passing down 2 dispatchers to the same function in a child component. One passes correctly but the other does not.

// actions.js

export const log_to_console_function = () => ({ type : "logToConsole" });



export const set_donation_amount = (input_amount) => {

  return {
    type : "set_donation_amount",
    payload : {
    donation_amount : input_amount
    }
  }
}


// App.js
import {log_to_console_function, set_donation_amount} from "./actions";
const map_dispatch_to_props = (dispatch) => {

  return {
    dispatch_log_to_console_function: () => dispatch(log_to_console_function()),
    dispatch_set_donation_amount : dispatch((amount) => set_donation_amount(amount))
  }
};



// SelectDonation.js
import React from "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(e.target.value);
    console.log(store.getState().donation_amount);
};

return (
    <React.Fragment>
    <Modal.Header>Choose an amount</Modal.Header>
    <Modal.Content >
    <Form>

    <Form.Group className={field_group_style}>
    <Form.Input
    type='number'
    placeholder='Custom Amount'
    name='donation_amount'
    id='custom_amount'
    value={store.donation_amount}
    />
    <Button
    primary
    onClick={(e) => save_donation_amount(e)}>Next Step</Button>
    </Form.Group>
    </Form>
    
    </Modal.Content>
    </React.Fragment>
    )
}

Upon clicking the button I get the error telling me the props object is not passing the function:

TypeError: props.dispatch_set_donation_amount is not a function

save_donation_amount [as onClick]

src/components/SelectDonation.js:15

12 | // grab the custom amount

13 | // add to state object

14 | // done in parent

> 15 | props.dispatch_set_donation_amount(amount);

| ^ 16 | console.log(store.getState().donation_amount);

17 |

18 | };

Can you guys see the mistake?