score:0
it sounds like anothercomponent
does not take into consideration the changed prop - this should be considered to be a bug in anothercomponent
. ideally, you'd fix it so that the changed prop gets used properly. eg, just for an example, maybe it's doing
const [searchhandler, setsearchhandler] = usestate(props.onsearch);
and failing to observe prop changes as it should. or, for another random example, this could happen if the listener prop gets passed to an addeventlistener
when the component mounts but again doesn't get checked for changes and removed/reattached.
if you can't fix anothercomponent
, you can use a ref for mylist
in addition to the prop:
const mycomponent = ({ mylist }) => {
const mylistref = useref(mylist);
useeffect(() => {
mylistref.current = mylist;
setfilteredlist(mylist);
}, [mylist]);
const [filteredlist, setfilteredlist] = usestate(mylist);
const onsearchhandler = (searchtext) => {
const filtereditems = mylistref.current.filter(item =>
item.name.tolowercase().includes(searchtext.tolowercase())
);
setfilteredlist(filtereditems);
};
it's ugly, but it might be your only option here.
Source: stackoverflow.com
Related Query
- How to make React functional component recreate callback function and read updated props
- How to store react component in state and pass a callback function
- How to pass function from FUNCTIONAL to CLASS component and access it outside of render( without prop ), using context in react js?
- How to read and update React Context from child with function components?
- How to transport a function and an object to a functional component in react
- React functional component test file unable to update state value and call its props function
- How do I access the Context and Component state from within a DOM callback in a function React component?
- How to create a specified callback function for a setState in React Functional Component
- How to specify function parameters for React component callback with TypeScript?
- how to access vairables outside of map function in js and jsx in a React component
- Mock React useRef or a function inside a functional component with enzyme and jest?
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- React 16: Call children's function from parent when using hooks and functional component
- How to test state update and component rerender after async call in react
- How to test with jest and typescript with types a basic react function component
- React input text default value and onblur function make input text read only
- How to make a React component look more readable and clean from my example?
- How to pass arguments to function in functional component in React
- How to add type FunctionComponent to React functional component using the "function" syntax and not "const"?
- await function returns a promise and returns true even if the condition is false | React Functional Component
- How does React update a component and its children after a state change?
- How to Read image data from API and render in React Component
- How to make my component re render after updating props from selector in react and redux-saga?
- how to set react parent component state by a async function and then pass this state to child as props?
- How to pass a function as props when both Parent and Child component also a functional component?
- How to make a functional React component with generic type?
- How Do I Pass a Function Through A React Component For Data Sharing Between Parent and Child?
- How to make a similar function as componentDidUpdate function in a functional component in React?
- How do I write React Functional Component + TypeScript's function overloading?
- How to iterate through a list of objects from api and render it to jsx page React functional component
More Query from same tag
- How to user useState hooks on different instances?
- How can I replace specific strings within an object?
- Error that history .push is not a function after clicking on signout in ReactJS
- How to Pass Event Up Through Multiple Child Components?
- How to make the input disabled with z-index in javascript or react?
- React.useState react differently as a prop or as a property?
- Using a dynamic key to setState in React
- Running Jest test with Dockerfile
- Remove padding in stackable Grid.Row
- ReactJS router + component hierarchy when swapping out components with route changes
- how to share environment variables between react app and express js server hosting it as static site
- d3 + vx react chart curve flat at each data point
- How to trigger an event to pass a list of items through react event
- ChakraUI - Cannot set isIndeterminate = true for CircularProgress as default props in theme extension
- How do I configure my .htaccess file for React App in Subdirectory?
- React Passing Data to Stateful Component from Another Component
- How to disable sidemenu on Ionic React by routing through certain page?
- How can I add a full screen button in HighchartsReact?
- how to add inline style in a tag?
- React Router Child Rendering Issue
- how to create area highchart for large amount of data based date?
- How to store datetime in azure cosmosdb from asp.net webapi
- Can I pass props to the children via props.children React JS
- How to use useMemo with an external API?
- how to make logo, navbar and search bar all in one row in bootstrap and in reactjs
- How to upload images on my React app from firebase storage?
- Plot options don't work in Variable Radius Pie chart
- Checkbox disabled not changing color in React
- Need guidance on best practices for keeping react/redux login code clean
- React onClick function not firing