// App.js inside render()
<SelectDonation ap="Hi"/> // I am able to log this
// App.js outside render()
const map_dispatch_to_props = (dispatch) => {
return {
dispatch_log_to_console_function: () => dispatch(log_to_console_function()),
dispatch_set_donation_amount : (amount) => dispatch(set_donation_amount(amount))
}
};
export const AppWrapped = connect(map_state_to_props, map_dispatch_to_props)(App);
both of the dispatchers do not appear in the props object in the child (this.props shows only the “Hi” string above).
If I simply use them in App.js parent component though (as this.props.<dispatcher()>, they work.
Any idea what the issue might be? Here are my imports
// App.js
import React, { Component } from 'react';
import './App.css';
import SelectDonation from './components/SelectDonation';
import PaymentDetails from "./components/PaymentDetails";
import Referrals from "./components/Referrals";
import ArticlesList from './components/ArticlesList';
import {connect} from "react-redux";
import './semantic/dist/semantic.min.css';
import {Modal, Header, Button, Form} from "semantic-ui-react";
import Redux from "redux";
import ReactRedux from "react-redux";
import {log_to_console_function, set_donation_amount} from "./actions";
import store from "./reducer";
// SelectDonation.js (Child component)
import React from "react";
import {css} from "emotion";
import {Button, Modal, Form, Input, Radio} from 'semantic-ui-react';
import store from "../reducer";
Here is the child component
export default (props) => {
const save_donation_amount = (e) => {
props.dispatch_log_to_console_function();
props.dispatch_set_donation_amount(e.target.value);
console.log(store.getState().donation_amount);
};
return (
<React.Fragment>
{console.log(props)}
{console.log(props.ap)}
<Modal.Header>Choose an amount</Modal.Header>
<Modal.Content >
<Form>
<Form.Group className={field_group_style}>
<p style={{ marginLeft : "2vw" }}>OR</p>
<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>
)
}