score:0
if you are already using redux, i think it is easier to handle the userinput with it instead of usestate in this situation.
so you can create the userinput redux state and the setuserinput redux action, as well. something like this:
header component
const header = () => {
const dispatch = usedispatch();
const userinput = useselector(state => state.userinput)
const inputchangehandler = (event) => {
dispatch(setuserinput(event.target.value))
}
return (
<div classname="header">
<input type="text" name="nome" onchange={inputchangehandler} value={userinput} />
</div>
)
}
search component
const search = () => {
const dispatch = usedispatch();
const word = useselector(state => state.userinput);
useeffect(() => {
dispatch(fetchasyncmoviessearch(word ));
}, [dispatch, word])
return (
<div>
<movielisting />
</div>
)
}
score:0
since you are using redux for state sharing between components, it's best to have a redux action that dispatches the userinput
to store from header
component when user types in the search, then access userinput
from search
component later using useselector()
.
the core idea is dispatching an action that contains user input value to redux store.
your custom updatesearchinput
redux action can look like this:
// assuming that you have it in ./customreduxactions.js file
// ...
export const updatesearchinput = (keyword) => ({
type: 'update-search-input',
payload: keyword,
});
// ...
then your redux store needs to be able to process this action:
switch (action.type) {
// ... other actions
case 'update-search-input':
return {
...state,
userinput: action.payload
};
// ... other actions
}
after this, when you access state.userinput
using useselector()
you should be able to get the input value from redux store across components.
your header
component then can look like this:
// your custom action written above
import { updatesearchinput } from './customreduxactions';
const header = () => {
const dispatch = usedispatch();
const userinput = useselector(state => state.userinput);
const inputchangehandler = (event) => {
const keyword = event.target.value;
// this dispatch() call is most important
dispatch(updatesearchinput(keyword));
};
return (
<div classname="header">
<input
type="text"
name="nome"
onchange={inputchangehandler}
value={userinput}
/>
</div>
)
}
your search
component remains the same with no changes:
const search = () => {
const dispatch = usedispatch();
// access state.userinput from redux store as expected behavior
const word = useselector(state => state.userinput);
useeffect(() => {
dispatch(fetchasyncmoviessearch(word));
}, [dispatch, word])
return (
<div>
<movielisting />
</div>
)
}
Source: stackoverflow.com
Related Query
- React Redux - Access state between two components
- Communication between two React form components with Redux
- not able to share state between two components in react
- How can we share a state variables between two React components on the same page?
- How to make a shared state between two react components?
- How to communicate UI state changes between React components with Redux?
- Access props sent to components along with Redux state data
- No need for state in React components if using Redux and React-Redux?
- React components lifecycle, state and redux
- Share the same styles between two types of component with React Styled Components
- synchronise scroll of two react components without using state and actions
- Sharing components between two react apps
- Sync queryParameters with Redux state and react router for function components
- Access Redux state using React Navigation
- Redux - State is updating but React components are not
- React Handle interaction state between components
- React redux - parent state changing, but child components not re-rendering
- How to pass objects and states between two components in React
- Toggle between two components /buttons using react toggle hook {Show one component and Hide another}
- How to transfer state between React components with hooks?
- What is the most efficient way to toggle between two components React JS?
- Switching between two components in React
- React access state after render with functional components
- Sharing props/state between two components in react
- How to share state between reducers in react (using hooks) without redux
- How to share React components between two Meteor apps in the same repository?
- Pass function between two child components in React
- How can I access react redux state in index.js file?
- Unable to access Redux state in React component
- React / Redux Components not re-rendering on state change
More Query from same tag
- Firebase values not updating constantly
- Need to join x axis and y axis label highcharts
- Expected an assignment or function call and instead saw an expression no-unused-expressions?
- Action does not trigger a reducer in React + Redux
- Filter array using regex in React.js?
- React onChange() not working for dropdown values of a custom object when editing an object from a database
- Nav not collapsing when a NavItem is selected on mobile devices
- Material-ui TextField dom element how to customize
- node.js add array of images into corresponding array
- React Leaflet - TileLayer does not render when it is first loaded
- Request fails due to CORS issue with origin from localhost
- MateralizeCSS (tabs, collapsibles, buttons) not working correctly: React.js (render)
- Uploading a zip file directly to s3 from browser after unzipping it at browser
- react-data-grid - Can you add your own components to the Toolbar?
- React Navigation 5, block back navigation after login
- Lopping/Map/Itterating through object results in Cannot read properties of undefined (reading 'map') error, but data is present
- SPFx Play HTML5 Video dynamically on a webpart
- React JS - Login system with Remember LocalStorage
- How to delete the current leaflet marker when create new search?
- React Complex Array, how to extract values?
- Put request with Express and Mongo DB
- Passing onChange events through the state
- Axios default headers cleared after page refresh in React.js
- npm install with --production option and peer dependencies
- Othello Minimax Algorithm Doesn't Work In React.js
- How do I use Google Fonts in React JS
- Make a separate conditional rendering inside for loop react js
- how to merge two json array of objects and display in react
- Formik with Yup
- React does not re-render component after state update