Passing Props to New Component - ReactJS - reactjs

Question

Wondering if I could get some help. I'm building a job board and I'm using github jobs as my jobs API feed. Here's a codesandbox link to my project so far:
https://codesandbox.io/s/34kzz5k6k1
(You need CORS chrome plugin to make the api work).
Basically:
In my index.js file, I'll calling the API in my 'ComponentDidMount'.
And by default, jobs appear for 'New York, on my page.
When you search for 'developer' jobs in 'london', in my 'HandleSubmit', you can see I'm pushing the results to a new URL '/jobresults'.
I'm using browser router to do this.
The problem I'm having though. So my default jobs are still appearing on /jobresults. As well as my 'London' search results, which appear underneath.
How do I only make 'london' jobs appear on this page?
I thought I could try and build a job board all front end. But now I'm think I need REST routing on the backend as well?
Maybe saving my API call in a database. And then displaying the results on a 'show' route?
Any guidance you can give, would be great!
Thanks.

Answer 1

There's a lot going on here that really needs to be revised. The way you've structured the app is anti-pattern (non-stardard/bad practice) and will cause you more headaches as the application becomes more dynamic.
I've gone ahead and restructured the entire app. I encourage you to deconstruct it and follow the application flow, and then take your project and fix it accordingly.
Working example: https://codesandbox.io/s/v873j0600y (still requires CORS extension)
index.js
import React from "react";
import { render } from "react-dom";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import JobForm from "./components/JobForm";
import JobResults from "./components/JobResults";
import NavHeader from "./components/NavHeader";
import "uikit/dist/css/uikit.min.css";
import "./styles.css";
const App = () => (
<main>
<BrowserRouter>
<section>
<NavHeader />
<Switch>
<Route exact path="/" component={JobForm} />
<Route path="/jobs" component={JobResults} />
<Route path="/jobresults/:id" component={JobResults} />
</Switch>
</section>
</BrowserRouter>
</main>
);
render(<App />, document.getElementById("root"));
NavHeader.js
import React from "react";
import { Link } from "react-router-dom";
export default () => (
<header>
<nav>
<ul style={{ listStyleType: "none" }}>
<li style={{ display: "inline", marginRight: 20 }}>
<Link to="/">Home</Link>
</li>
<li style={{ display: "inline", marginRight: 20 }}>
<Link to="/jobs">Jobs</Link>
</li>
</ul>
</nav>
</header>
);
JobForm.js
import React, { Component } from "react";
export default class JobForm extends Component {
state = { searchData: "", cityData: ""};
// HANDCHANGE FOR JOB SEARCH
handleChange = e => this.setState({ searchData: e.target.value });
// HANDLE CHANGE FOR LOCATION SEARCH
handleChangeLocation = e => this.setState({ cityData: e.target.value });
// HANDLE SUBMIT
handleSubmit = e => {
e.preventDefault();
const { cityData, searchData } = this.state;
if (!cityData || !searchData) return;
this.props.history.push(
`/jobresults/positions?description=${searchData}&location=${cityData}`
);
};
render = () => (
<section className="hero homepage">
<div className="container">
<h1 className="title has-text-white">USA Creative City</h1>
<h2 className="title has-text-white">Start your job search here!</h2>
<form className="level-item" onSubmit={this.handleSubmit}>
<div className="inputstyle field has-addons">
<div className="control ">
<input
className="uk-input"
type="text"
placeholder="Software Engineer..."
onChange={this.handleChange}
style={{ width: 200 }}
/>
</div>
<div className="control ">
<input
className="uk-input"
type="text"
placeholder="City"
onChange={this.handleChangeLocation}
style={{ width: 200 }}
/>
</div>
<div className="control">
<button
style={{ width: 200 }}
className="uk-button uk-button-primary"
>
<i
style={{ marginRight: 10 }}
className="fas fa-search"
aria-hidden="true"
/>Search Jobs
</button>
</div>
</div>
</form>
</div>
</section>
);
}
JobResults.js
import isEmpty from "lodash/isEmpty";
import React, { Component, Fragment } from "react";
import axios from "axios";
import qs from "qs";
import Spinner from "./Spinner";
import ShowResults from "./ShowResults";
import NoResults from "./NoResults";
const getRandomInt = max => Math.floor(Math.random() * Math.floor(max));
const locations = ["Los Angeles", "New York", "San Mateo", "San Francisco"];
const descriptions = ["Developer", "Engineer", "MySQL", "MongoDB"];
export default class JobResults extends Component {
state = { isLoading: true, jobs: [], error: "" };
componentDidUpdate = (prevProps, prevState) => {
if (this.props.location.pathname !== prevProps.location.pathname) {
this.setState({ isLoading: true }, () => this.fetchData());
}
};
componentDidMount = () => this.fetchData();
fetchData = () => {
let { description, location } = qs.parse(this.props.location.search, {
ignoreQueryPrefix: true
});
if (!description || !location) {
description = descriptions[getRandomInt(3)];
location = locations[getRandomInt(3)];
}
axios(`https://jobs.github.com/positions.json?description=${description}&location=${location}`)
.then(({ data }) => this.setState({ isLoading: false, jobs: data.slice(0, 9) }))
.catch(err => this.setState({ isLoading: false, err: err.toString() }));
};
render = () =>
this.state.isLoading
? <Spinner />
: <section>
<h3 style={{ textAlign: "center" }} className="has-text-centered animated shake slow">
RESULTS
</h3>
<div className="columns is-multiline">
{isEmpty(this.state.jobs)
? <NoResults err={this.state.err} />
: <ShowResults jobs={this.state.jobs} />
}
</div>
</section>
);
}
ShowResults.js
import map from "lodash/map";
import React from "react";
export default ({ jobs }) => (
map(jobs, ({ id, created_at, company_logo, title, company, location, url }) => (
<div className="result" key={id}>
<img className="image" src={company_logo} />
<h4 className="has-text-left purple">Location: {title}</h4>
<h5 className="has-text-left purple">
Created on: {created_at}
</h5>
<h5 className="has-text-left purple">Company: {company}</h5>
<h5 className="has-text-left purple">Location: {location}</h5>
<a className="uk-button uk-button-primary" href={url} target="_new">
apply on github
</a>
<a
className="uk-button uk-button-primary"
style={{ marginTop: 10 }}
href={url}
target="_new"
>
apply on creative jobs
</a>
</div>
)
);
NoResults.js
import React from "react";
export default ({ err }) => (
err
? <p style={{ textAlign: "center", color: "red" }}>
<i style={{ marginRight: 5 }} className="fas fa-exclamation-circle" />
{err}
</p>
: <p style={{ textAlign: "center", color: "grey" }}>
<i style={{ fontSize: 22, marginRight: 5 }} className="far fa-calendar-times"/>
No jobs matching that criteria.
</p>
);
Spinner.js
import React from "react";
const spinners = () => {
let children = [];
for (var i = 1; i < 13; i++) {
children.push(<div key={i} className={`sk-circle${i} sk-circle`} />);
}
return children;
};
export default () => <div className="sk-fading-circle">{spinners()}</div>;