Pass a variable in a functional component to a class component - reactjs

Question

I've a ToysPage.js with a class component and a SearchFeature.js with a functional component (child of ToysPage).
I made a searchBar in SearchFeature.js with hooks and with console.log I can see that it works. But how can I pass the const filteredToys to the state toysFiltered in ToysPage.js?
ToysPage.js
import React, { Component } from "react";
export default class ToysPage extends Component {
state = {
toys: undefined,
toysFiltered: undefined,
};
//Here I call all the toys through Axios and insert them in toys and toysFiltered
return (
<>
<div className="container">
<div className="row">
<SearchSide
toysFiltered={this.state.toysFiltered}/>
<ToysSide toys={this.state.toysFiltered} />
</div>
</div>
</>
);
}
}
function SearchSide({ toysFiltered }) {
return (
<>
<div className="col-3">
<SearchFeature toysFiltered={toysFiltered} />
</div>
</>
);
}
SearchFeature.js
import React, { useState, useMemo } from "react";
export default function SearchFeature({ toysFiltered }) {
const [query, setQuery] = useState("");
const [filteredToys, setFilteredToys] = useState(toysFiltered);
useMemo(() => {
const result = toysFiltered.filter((toy) => {
return toy.titulo.toLowerCase().includes(query.toLowerCase());
});
setFilteredToys(result);
}, [toysFiltered, query]);
return (
<div className="form-group">
<label>Search a Toy</label>
<input
type="text"
className="form-control"
placeholder="Search"
value={query}
onChange={(e) => {
setQuery(e.target.value);
}}
/>
</div>
);
}

Answer 1

You have some state in a child component, SearchFeature, that you would like in the parent component ToysPage. The usual pattern for this is to lift the state out of SearchFeature, which you have partially done.
You're almost doing this correctly. You pass a list of filtered toys into SearchFeature, but that list is only being used as a default value for a duplicate state variable in SearchFeature, and changes don't flow up to the parent:
// filteredToys has the real state. toysFiltered is just a default value.
const [filteredToys, setFilteredToys] = useState(toysFiltered);
Instead, leave the state variable in the parent, and send changes up from the search component.
Also, useMemo shouldn't have side effects. I've changed it to useEffect to be safe. There is a way to do this with useMemo, but that's out of the scope of the question.
in ToysPage.js
Add a setter function:
<SearchSide
toysFiltered={this.state.toysFiltered}
setToysFiltered={
newFilterList => this.setState({...this.state, toysFiltered: newFilterList})}
/>
Pass it through from SearchSide into SearchFeature:
function SearchSide({ toysFiltered, setToysFiltered }) {
return (
<>
<div className="col-3">
<SearchFeature toysFiltered={toysFiltered} setToysFiltered={setToysFiltered} />
</div>
</>
);
}
SearchFeature.js
export default function SearchFeature({ toysFiltered, setToysFiltered }) {
const [query, setQuery] = useState("");
useEffect(() => {
const result = toysFiltered.filter((toy) => {
return toy.titulo.toLowerCase().includes(query.toLowerCase());
});
setToysFiltered(result);
}, [setToysFiltered, query]);
// ...
}