how to pass search value from one component to another [closed] - reactjs

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
hello veryone im trying to make a simple search bar to search my firebase database based on the search bar queires. im trying to get the input value from 1 component and then in component 2 display the results based on the input value from component 1 using firebase queries. Can someone tell me what im doing wrong ? thanks
1 component
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { updateFilter } from '../../actions/filtered';
import { CarsRef, timeRef } from '../admin/reference';
import Searchresults from './searchresult';
class TopSearchBar extends Component {
state = {
make: '',
body: '',
priceRange: ''
}
handleSubmit = (e) => {
e.preventDefault();
this.props.updateFilter(this.state);
this.props.history.push('/cars2')
}
render(){
let content = null;
if (content !==null ) {
<Searchresults make={this.state.make} />
}
else {
<p> h </p>
}
let searchMake = ["Audi","Honda","Lamborghini","Maserati", "Subaru","Toyota"];
let cars = {
Audi: [ {body: "Sedan"}, {body: "Coupe"}, {body: "SUV"} ],
Honda: [ {body: "Sedan"}, {body: "Van"}, {body: "SUV"} ],
Lamborghini: [ {body: "Coupe"} ],
Maserati: [ {body: "Coupe"}, {body: "SUV"} ],
Mercedes: [ {body: "Convertible"}, {body: "Coupe"} ],
Subaru: [ {body: "Hatchback"} ],
Toyota: [ {body: "SUV"}, {body: "Sedan"}, {body: "Truck"} ]
}
let makes = searchMake.map((make, i) => {
return (
<option key={i} value={make}>
{make}
</option>
)
})
if(this.state.make) {
var body = cars[this.state.make].map((make, i) => {
return (
<option key={i} value={make.body}>
{make.body}
</option>)
})
}
return(
<div className="top-search-bar">
<div className="container text-align">
<form onSubmit={this.handleSubmit}>
<div className="row">
<div className="col-3">
<select className="form-control"
value={this.state.make}
onChange={(e)=>this.setState({make: e.target.value})}
>
<option value="" disabled selected>Make</option>
{makes}
</select>
</div>
<div className="col-3">
<select className="form-control"
value={this.state.body}
onChange={(e)=>this.setState({body: e.target.value})}
>
<option value="" disabled selected>Body Type</option>
{ makes ? body : null }
</select>
</div>
<div className="col-3">
<select className="form-control"
value={this.state.priceRange}
onChange={(e)=>this.setState({priceRange: e.target.value})}
>
<option value="" disabled selected>Price</option>
<option value="lowHigh">Low To High</option>
<option value="highLow">High To Low</option>
</select>
</div>
<div className="col-3">
<button type="submit" className="btn btn-success btn-block" onClick={this.handleSubmit}>Search</button>
</div>
</div>
{content}
</form>
</div>
</div>
);
}
}
2nd component
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Car from './car';
import { CarsRef, timeRef } from '../admin/reference';
import { CardImg, Button, Row, Col, Table } from 'reactstrap';
import { getsinglecar } from '../../actions/cars';
import Icon from 'react-icons-kit';
import { bin } from 'react-icons-kit/icomoon';
import { getCarsThunk } from '../../actions/cars';
import { Link } from 'react-router-dom';
class Searchresults extends Component {
// ...
state = {
Cars: [],
Carsloading: true
};
handleDelete = (id) => {
this.props.deleteCar(id);
}
componentWillMount() {
alert(`${this.props.make}`); // returns undefined
CarsRef.orderByChild(`${this.props.make}`).startAt(`${this.props.make}`).endAt(`${this.props.make}`).on('value', (snap) => {
let Cars = []
snap.forEach((child) => {
Cars.push({ ...child.val(), key: child.key });
});
console.log(Cars);
this.setState({ Cars: Cars, CarsLoading: false });
});
}
render() {
const { Cars, CarsLoading } = this.state;
const orderedcars = Cars;
let carList;
if (CarsLoading) {
carList = <div className="TaskList-empty">Loading...</div>;
} else {
carList = (
<ul className="TaskList">
{Cars.map(car => (
<div>
<Row>
<Col md="12">
<div className="card border-secondary mb-3">
<div className="card-header text-success">
<h4>
<Link to={`/cars/${car.id}`}>
</Link>
</h4>
</div>
<div className="card-body">
<Row>
<Col md="5">
<CardImg
className="carlist-margin"
top
width="100%"
src={car.link}
alt={car.make}
/>
</Col>
<Col md="4">
<Table className="striped">
<tbody>
<tr>
<td>Engine:</td>
<td>{car.engine}</td>
</tr>
<tr>
<td>Drive Type:</td>
<td>{car.drive_type}</td>
</tr>
<tr>
<td>Body:</td>
<td>{car.body_type}</td>
</tr>
<tr>
<td>Exterior Color:</td>
<td>{car.ext_color}</td>
</tr>
<tr>
<td>Interior Color:</td>
<td>{car.int_color}</td>
</tr>
<tr>
<td>Transmission:</td>
<td>{car.transmission}</td>
</tr>
<tr>
<td>VIN:</td>
<td>{car.vin}</td>
</tr>
</tbody>
</Table>
</Col>
<Col md="3">
<Table className="striped">
<tbody>
<tr>
<td className="text-primary text-right">
<strong>MSRP:</strong>
</td>
<td className="text-primary text-right">
<strong>${car.price}</strong>
</td>
</tr>
<tr>
<td className="text-danger text-right">
Dealer Discount:
</td>
<td className="text-danger text-right">
{car.sale}%
</td>
</tr>
<tr>
<td className="text-primary text-right">
<strong>Total:</strong>
</td>
<td className="text-primary text-right">
<strong>
${car.price - (car.price * car.sale) / 100}
</strong>
</td>
</tr>
<tr>
<td className="text-primary text-right">
Est. Lease:
</td>
<td className="text-primary text-right">
$230/m*
</td>
</tr>
<tr>
<td className="text-primary text-right">
Est. Finance:
</td>
<td className="text-primary text-right">
$330/m*
</td>
</tr>
<tr>
<td className="text-right" />
<td className="text-right">
<Link to={`/cars/${car.id}`}>
<Button className="btn btn-success">
More
</Button>
</Link>
</td>
</tr>
</tbody>
</Table>
</Col>
</Row>
</div>
</div>
</Col>
</Row>
</div>
))}
</ul>
);
}
return carList;
}
}
export default Searchresults
;

Answer 1

You have to connect your 2nd component to the Redux Store and create a MapStateToProps to have access to the properties you need.
First create the MapStateToProps
const mapStateToProps = state => {
return {
make: state.make// place here the name of the property in your reducer
}
}
Then connect it to the Redux Store.
export default connect(mapStateToProps)(Searchresults)
From now on you will have access the prop "make" (or whatever name you give in on your MapStateToProps).
Take a look at this example from Redux Documentation
If you show me your actions, I may be more specific in my response.