Search Component - Walkthrough

Once we've created our Search.js and added everything we need to, it should look something like this:

import React, { useState } from "react";
import "../styles/search.css";
 
const Search = () => {
  return (
    <>
      <input className="search-input" type="text" />
    </>
  );
};
 
export default Search;

Our App.js should look like this after importing Search.

import React from "react";
import "../styles/app.css";
import Search from "./Search";
 
const App = () => {
  return (
    <div className="app">
      <img
        className="nasa-logo"
        src="https://cdn.cnn.com/cnnnext/dam/assets/200424060716-nasa-worm-logo.jpg"
        alt="nasaLogo"
      />
      <Search />
    </div>
  );
}
 
export default App;

Our search.css and app.css file's should look something like this

.search-input {
  margin: auto;
  width: 20%;
  height: 50px;
  border-radius: 11px;
  font-size: 20px;
  padding: 0 10px;
}

.app {
  display: flex;
  flex-direction: column;
}
 
.nasa-logo {
  margin: auto;
  width: 500px;
  height: 300px;
}

And lastly, our App.test.js and Search.test.js should have a basic tests like this:

import React from "react";
import { render } from "@testing-library/react";
import App from "../components/App";
 
describe("App", () => {
  const { asFragment } = render(<App />);
 
  it("renders correctly", () => {
    expect(asFragment()).toMatchSnapshot();
  });
});

import React from "react";
import { render } from "@testing-library/react";
import Search from "../components/Search";
 
describe("Search", () => {
  const { asFragment } = render(<Search />);
 
  it("renders correctly", () => {
    expect(asFragment()).toMatchSnapshot();
  });
});

Moving forward, unless complex you will have to style your own CSS and write your own tests. Let's continue!

Search Component - Walkthrough

On this page