using search bar css in react - html

Question

I am trying to use a search bar css from code pen.
I used their exact code but the search bar seems to be really buggy on react.
Here is code sandbox for better reference. https://codesandbox.io/s/sad-moser-mdxmd?file=/src/Dashboard.js
Here's the code that I am currently using.
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" id="input_text"></input>
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
.search {
width: 100%;
position: center;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid #00b4cc;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9dbfaf;
}
.searchTerm:focus {
color: #00b4cc;
}
.searchButton {
width: 40px;
height: 36px;
border: 1px solid #00b4cc;
background: #00b4cc;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap {
width: 30%;
position: flex;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I want the search bar to look like this:
This is the link to the code that I attempted to use.
https://codepen.io/huange/pen/rbqsD

Answer 1

Change the css for .wrap to this -
.wrap {
/* width: 30%; */
display: flex;
/* top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
}
Surely you meant display: flex; and not positon: flex;

Answer 2

Explanation
First, flex is for display, not for position. You can use both together, but they don't probably interact in the way you'd think.
Position strictly deals with where the element is on the page (either relative to where it would be while in the natural flow, absolutely compared to the closest parent with an explicit position, or fixed somewhere on the screen).
Display deals with how the elements are laid out (or if at all). I won't go into all of the display possibilities here, but block, inline-block, inline, and flex are the most popular and you can easily learn about them with a Google or Youtube search.
To answer your question, you need to remove position from your .wrap class as well as all of your position related items. Then add margin for centering and top and bottom space (remember that margin auto for left and right will center it). Then, to do things the react way, you need to install react-fontawesome with npm and use the icon like that for the most natural and best performance. Here's a link for how to do that, with examples of usage at the bottom: https://fontawesome.com/how-to-use/on-the-web/using-with/react
You also need a placeholder label if you want your search bar to be identical to the one on CodePen. This will give you the faded text before the user starts typing. I've added it as a prop in the input.
Finally (and this isn't appearance related), you probably want to set up two-way binding with your input so that you can actually do something with the value later. I think my code shows what's happening simply enough, but basically you just have a value in your state that's tied to your input. When the input changes, that state is updated, then when the input is rerendered, it reads its value from the state. This gives you access to the value in the other parts of your code.
CSS
.search {
width: 100%;
position: center;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid #00b4cc;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9dbfaf;
}
.searchTerm:focus {
color: #00b4cc;
}
.searchButton {
width: 40px;
height: 36px;
border: 1px solid #00b4cc;
background: #00b4cc;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap {
width: 30%;
margin: 20px auto;
/* change the margin to move where it is on the page */
}
JSX
import {Component} from 'react';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faSearch } from '#fortawesome/free-solid-svg-icons';
class Foo extends Component {
state = {
input: '',
};
render() {
return (
<div class="wrap">
<div class="search">
<input
placeholder="What are you looking for?"
value={this.state.input}
onChange={(event) => this.setState({ input: event.target.value })}
type="text"
className="searchTerm"
id="input_text"
></input>
<button type="submit" className="searchButton">
<FontAwesomeIcon icon={faSearch} />
</button>
</div>
</div>
);
}
}
Not to sell myself here, but if you'd like to play around with some of these properties interactively, here's an app I built specifically for this kind of scenario: https://csspressme.web.app/