passing parameter onClick, React - reactjs

Question

i have this slice of code:
const ChangeRequest = ({
inRelease,
title,
requestId,
cost,
supervisor,
chipText,
description,
showModal,
}) => (
<div
onClick={() => showModal({
modal: 'changeRequestDetail',
state: { title },
})}
className={styles.crContainer}
>
Main problem
in the const ChangeRequest i've the value title, i need to pass this value to the onClick property of the modal.
modal
<div
onClick={() => showModal({
modal: 'changeRequestDetail',
state: { title },
})}
className={styles.crContainer}
>
In this way if i try to console.log(title) i get undefined as value.
Question
how can i pass the value of title to the value state of show modal in the onClick function ?
Added the showModal
so i called it with mapDispatchToProps
const mapDispatchToProps = {
showModal: showModalAction,
};
this is the relative action
export const SHOW_MODAL = 'SHOW_MODAL';
export const HIDE_MODAL = 'HIDE_MODAL';
export function showModalAction(params) {
return dispatch => dispatch({
type: SHOW_MODAL,
payload: params,
});
}
export function hideModalAction(params) {
return dispatch => dispatch({ type: HIDE_MODAL });
}
this is his reducer:
import { Map } from 'immutable';
import { SHOW_MODAL, HIDE_MODAL } from '../actions/modalActions';
const initialState = Map({
type: null,
state: null,
});
const modalReducer = (state = initialState, action) => {
switch (action.type) {
case SHOW_MODAL:
return state
.set('type', action.payload.modal)
.set('state', action.payload.state);
case HIDE_MODAL:
return state
.set('type', null)
.set('state', null);
default:
return state;
}
};
export default modalReducer;

Answer 1

Yesterday, after several tries i succeed to got the Data.
What was the problem ?
we need to mapStateToProps the data from the state of the modal. Why ? because the modal was a reducer.
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import styles from './styles.module.css';
import BlueLightRow from './BlueLightRow';
import DetailSection from './DetailSection';
import Modal from '../../../components/Modal';
import Header from './Header';
function ChangeDetail({
title, supervisor, architect, initiator, id, cost, description, chipText,
}) {
return (
<Modal noPadding bigDialog>
{console.log(title)}
<div className={styles.blueBackground}>
<div className={styles.container}>
<Header title={title} chipText={chipText} />
<BlueLightRow cost={cost} id={id} />
<DetailSection supervisor={supervisor} architect={architect} claimant={initiator} description={description} />
</div>
</div>
</Modal>
);
}
ChangeDetail.propTypes = {
title: PropTypes.string.isRequired,
architect: PropTypes.string.isRequired,
initiator: PropTypes.string.isRequired,
supervisor: PropTypes.string.isRequired,
id: PropTypes.string.isRequired,
cost: PropTypes.number.isRequired,
description: PropTypes.string.isRequired,
chipText: PropTypes.string.isRequired,
};
const mapStateToProps = state => ({
title: state.getIn(['modalReducer', 'state', 'title']),
architect: state.getIn(['modalReducer', 'state', 'architect']),
initiator: state.getIn(['modalReducer', 'state', 'initiator']),
supervisor: state.getIn(['modalReducer', 'state', 'supervisor']),
description: state.getIn(['modalReducer', 'state', 'description']),
cost: state.getIn(['modalReducer', 'state', 'cost']),
id: state.getIn(['modalReducer', 'state', 'requestId']),
chipText: state.getIn(['modalReducer', 'state', 'chipText']),
});
export default connect(mapStateToProps, null)(ChangeDetail);
If someone will need more explanation about the code i will be happy to go deep if i can :)