State not getting set using useState hook | ReactJS - reactjs

Question

I have a component where I am storing API response in responseArray and I am using this responseArray to initialize matchFundResults state using hooks. Next, I am trying to run a useEffect using matchFundResults as a dependency but matchFundResults is always coming as blank whereas I have value in responseArray. How should this be fixed?
const MatchFundModal = ({ row, val }) => {
let rightBody;
const dispatch = useDispatch();
const selectedRows = useSelector((state) => state.pcPerformance.processor.checkedRows.selectedRows || []);
const responseArray = useSelector((state) => state.pcPerformance.processor.fundAliases);
const [showMatchFundModal, setshowMatchFundModal] = useState(val);
const [matchFundResults, setMatchFundResults] = useState(responseArray);
const [activeRowData, setActiveRowData] = useState({ Id: null, FundName: null, SourceId: null });
const [selectedMatchFund, setSelectedMatchFund] = useState();
const [searchFieldVal, setSearchFieldVal] = useState();
if (!activeRowData.Id) {
const firstRow = selectedRows.length > 0 && selectedRows[0];
setActiveRowData({ Id: firstRow.Id, FundName: firstRow.FundName, SourceId: firstRow.SourceId });
//dispatch(getFundNameAliasMatch(firstRow.FundName, firstRow.SourceId));
}
useEffect(() => {
dispatch(getFundNameAliasMatch(activeRowData.FundName, activeRowData.SourceId));
}, [activeRowData.Id]);
console.log('Helloworld responseArray', responseArray);
console.log('Helloworld matchFundResults', matchFundResults);
useEffect(() => {
rightBody = matchFundResults**.map((item) => {
return (
<li key={item.FundId}>
<input
type="radio"
value={item.FundId}
name="action-radio"
id={`action-radio-${item.FundId}-${item.SourceId}`}
onClick={(e) => handleRadioButtonClick(e)}
/>
<span>{item.FundName}</span>
<br />
<span className="searchFundID">#{item.FundId}</span>
</li>
);
});
}, [matchFundResults, activeRowData.Id]);
const matchFundBody = (
<div className="matchFundModal grid">
<p className="matchFundModal__header 12">Match or add</p>
<div className="matchFundModal__body 12">
<div className="matchFundModal__body__right 6">
<p id="possibleMatchText">Possible matches</p>
<ul>{rightBody}</ul>
</div>
</div>
<div className="matchFundModal__footer 12">
<button className="matchFundModal__footer__button">Match Selected</button>
</div>
</div>
);
return (
<Fragment>
<Modal
isOpen={showMatchFundModal}
bodyContent={matchFundBody}
showHeader={false}
handleOnModalToggleFunction={hideModal}
handleOnModalPrimaryButtonClick={onPrimaryButtonClick}
handleOnModalSecondaryButtonClick={hideModal}
primaryButtonText={'Match Fund'}
centered={true}
size="sm"
hideFooterButtons={true}
modalClasses="matchFundModal"
showFooter={false}
/>
</Fragment>
);
};
export default MatchFundModal;```
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/HxIv4.png

Answer 1

I don't know why you would want to copy responseArray to matchFundResults instead of just using responseArray directly but you never use setMatchFundResults when responseArray changes so you only set it initially and at that time responseArray is probably an empty array. You could do the following:
const responseArray = useSelector((state) =>
state.pcPerformance.processor.fundAliases);
const [matchFundResults, setMatchFundResults] = useState(responseArray);
//every time responseArray changes you need to set matchFundResults
useEffect(()=>setMatchFundResults(responseArray),[responseArray])
But it probably would be better to not copy redux state to local state and instead just use redux state directly.
Your comment suggest you have all data in redux state and would like to filter the data (the reason why you copy redux state to local state). You could do that with selectors in the following way:
const { Provider, useSelector } = ReactRedux;
const { createStore } = Redux;
const { createSelector } = Reselect;
const { useState, useMemo } = React;
const initialState = {
data: [
'hello world',
'hello redux',
'hello react',
'goodbye jquery',
],
};
const reducer = (state) => state;
//selectors
const selectData = (state) => state.data;
const createSelectFilteredData = (filter) =>
createSelector([selectData], (data) =>
data.filter((item) =>
item.toLowerCase().includes(filter.toLowerCase())
)
);
//creating store with redux dev tools
const store = createStore(reducer, initialState);
const App = () => {
const [filter, setFilter] = useState('');
const selectFilteredData = useMemo(
() => createSelectFilteredData(filter),
[filter]
);
const filteredData = useSelector(selectFilteredData);
return (
<div>
<label>
filter:
<input
type="text"
value={filter}
onChange={(e) => setFilter(e.target.value)}
/>
</label>
<div>
filtered data:
<pre>
{JSON.stringify(filteredData, undefined, 2)}
</pre>
</div>
</div>
);
};
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reselect/4.0.0/reselect.min.js"></script>
<div id="root"></div>