React Search Bar , call function from another class - django

Question

hello guys i am fetching data from my api and i try to set a search bar like this :
import React, { Component } from "react";
import ProductsIndex from "./search_bar";
class SearchBar extends Component {
constructor(props) {
super(props);
this.state = { term: "" };
this.onInputChange = this.onInputChange.bind(this);
this.onFormSubmit = this.onFormSubmit.bind(this);
}
onInputChange(event) {
this.setState({ term: event.target.value });
}
onFormSubmit(event) {
event.preventDefault();
ProductsIndex.renderProducts(this.state.term)
// this.props.fetchWeather(this.state.term);
this.setState({ term: "" });
}
render() {
return (
<form onSubmit={this.onFormSubmit} className="input-group">
<input
placeholder="Get a five-day forecast in your favorite cities"
className="form-control"
value={this.state.term}
onChange={this.onInputChange}
/>
<span className="input-group-btn">
<button type="submit" className="btn btn-secondary">Submit</button>
</span>
</form>
);
}
}
export default SearchBar;
In my onSubmit function try to call my function renderProducts from my class ProductsIndex here :
class ProductsIndex extends Component {
componentDidMount() {
this.props.fetchProducts();
}
renderProducts(term) {
return _.map(this.props.products, product => {
if(product.name==term) {
return (
<tr key={product.name}>
<td>{product.name}</td>
<td>{product.product_category.name}</td>
<td>{product.price}</td>
</tr>
);
}
});
}
render(){
return(
<div>
<table className="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
</tr>
</thead>
<tbody>
{this.renderProducts()}
</tbody>
</table>
</div>
);
}
}
function mapStateToProps(state) {
return {products: state.products}
}
export default connect(mapStateToProps, {fetchProducts})
(ProductsIndex);
But that is doesn't work i get this error : Uncaught TypeError: _search_bar2.default.renderProducts is not a function
Thanks you for your help

Answer 1

The short answer is: ProductsIndex.prototype.renderProducts
The correct answer is: the state of terms should be owned by a component higher up in the hierarchy. SearchBar triggers a state change in the parent component and it trickles down to ProductIndex. You already probably have a component suitable for this in your hierarchy, but here is how it may look if you add one explicitly for this purpose.
export class SharedParent extends React.Component {
constructor() {
super();
this.state = {
term: ""
};
//I use this style for methods, you can also use fat arrows to ensure 'this' is properly set
this.setTerm = this.setTerm.bind(this);
}
setTerm(term) {
//beware current best practice is to pass a fucntion
//not an object to setState
this.setState({ term });
}
render() {
return [
<ProductIndex key="a" term={this.state.term} {...this.props.productProps} />,
<SearchBar key="b" setTerm={this.setTerm} {...this.props.searchProps}/>
];
}
}
PS: I would suggest also using Redux or another state management solution. You can't go wrong with Redux though.