score:1
useselector
takes a function of state as the argument. state being the state of the redux store. like this:
const numbers = useselector(state => somewhereinstate.number);
in this way, we can select variables out of the redux store. what you seem to be trying to do is update the selectednum
variable. but i don't see where you're dispatching that update to the store. your useeffect
doesn't fire because it depends on selectednum
. your selectnumberhandler
might alter selectednum
, but your component doesn't know that, because selectednum
is not a state variable in the component.
so you kind of need to decide: are you keeping the state local to the component, or are you communicating through the store?
local to the component - no useselector
const myfunction = () => {
const [selectednumber, setselectednumber] = usestate(1)
const [filterednumbers, setfilterednumbers] = usestate([])
useefect( () => {
setfilterednumbers(selectednumber)
}, [selectednumber])
return (
<div>
<select onchange={e => setselectednumber(e.value)}>
<option value='1' >1</option>
<option value='2' >2</option>
</select>
<div classname={'numbers-list'}>
{filterednumbers.map(num => {
<p>{num}</p>;
})}
</div>
</div>
);
};
through redux store, with usedispatch
and useselector
const myfunction = () => {
const numbers = useselector(state => state.yourvalues);
const dispatch = usedispatch()
return (
<div>
<select onchange={e => dispatch( setyourvalues(e.value) )}>
<option value='1' >1</option>
<option value='2' >2</option>
</select>
<div classname={'numbers-list'}>
{numbers.map(num => {
<p>{num}</p>;
})}
</div>
</div>
);
};
where setyourvalue
is a function that creates an action to update the yourvalue
in the redux store.
hopefully that gives you some direction.
Source: stackoverflow.com
Related Query
- React UseSelector with render upon variable change
- Strange behavior of React setState with let variable change
- Wordpress Gutenberg React – render variable with HTML
- Implement shouldComponentUpdate with React hooks - Render child only once, but make DOM changes when props change
- Change variable in array with react hook setState
- Why is my React component not re-rendering upon state change with Date?
- How can i can change the value of a variable with if/else to return certain div in react
- issues with array of objects from variable in React render methodq
- How to change variable value in return of render with reactjs?
- Common scenario with react hooks: how to change hook dependency without causing infinite render
- React render html from a string with a dynamic variable
- React with render props - component not updating on props change
- How do I change a variable in a for loop with a onclick ? React jsx file
- Insert HTML with React Variable Statements (JSX)
- Rendering React components with promises inside the render method
- Why can't I change my input value in React even with the onChange listener
- Why can't I change my input value in React even with the onChange listener
- How to fetch the new data in response to React Router change with Redux?
- React JSX, how to render text with a single quote? Example <p>I've</p>
- How to focus something on next render with React Hooks
- Change the cursor position in a textarea with React
- React context with hooks prevent re render
- React useEffect() only run on first render with dependencies
- How to render images with react on server side?
- How to change text Value upon Button press in React Native?
- How to render a string with JSX in React
- How to import scss file as variable in react with typescript
- React - change this.state onClick rendered with array.map()
- Change classes to an element with react
- Render unicode characters in react native using variable
More Query from same tag
- conditional slider with material-ui
- Field value not printing in custom component
- passing and returning useState in react
- Must normalizing state shape for array data involve round-trip conversion between object array and nested object
- Material-UI for react, how layout Card component to align texts
- React Router Link to same component with different URL not re-rendering
- ReactJS chrome extension installed but not showing up
- Export function inside functional component in react
- Adding promise polyfill to ES6
- Tailwind text color not changing on hover
- React Component not reload in browser after save the changes in localhost
- slice text in textbox after newline
- Run a simple function on radio button select or deselect
- Display initial element in React for bots and screen readers
- webpack style-loader - import different styles on react components without overriding
- calling and pass arguments to children component's function from parent component in reactjs
- Style ClassName in react
- Error in creating multi-select in reactjs
- How to create a text component where first word of sentence to be bold?
- How to render a html code input?
- Reset autohide timer in Snackbar when Re-Rendering
- Trying to submit a user score with a button in react. Getting error message of saveScore is not a function
- react js send object to node js
- React: change url without rerender; using window.history?
- Paginator with elipse in the middle in TSX
- React Router this.props.location is always Undefined
- How to pass parameter to an API get request in react.js
- Could not find "store" in either the context or props of
- Insert DOM element into React component
- How to import packages with @ in React?