CSS styles are not being applied to React file - css

Question

I am working on a web based project. All code is executed but the styles are not being applied to files. Below is code of my react file. I also added my css file below it.
I tried using .sass extension which is also not working.
Can anyone help me with it? How do I apply styles?
import "./App.css";
import React, {useState, useEffect} from "react";
import Axios from "axios";
function App(){
const [searchVal,setSearchVal]=useState('');
//getting values from DB
return <div>
<input type="text" placeholder="Search College" onChange={event =>{setSearchVal(event.target.value)}}></input>
{collegeList.filter((val)=>{
if(searchVal==""){
return val;
}else if (val.Name_of_College.toLowerCase().includes(searchVal.toLowerCase())){
return val;
}
}).map((val)=>{
return <div className="clgListDiv" > <p>
College Name: {val.Name_of_College} <br></br>
</p>
</div>
})}
</div>
}
export default App;
This is the css file
.App{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
}
.APP input{
margin-top: 20px;
width:350px;
height: 40px;
font-size: 20px;
padding-left: 10px;
}

Answer 1

Well it doesn't work because you didn't add className attribute in JSX code in first div and maybe you should rename .APP input to .App input in your CSS file as you also want same styling in input tag also.
import "./App.css";
import React, {useState, useEffect} from "react";
import Axios from "axios";
function App(){
const [searchVal,setSearchVal]=useState('');
//getting values from DB
return <div className='App'>
<input type="text" placeholder="Search College" onChange={event =>{setSearchVal(event.target.value)}}></input>
{collegeList.filter((val)=>{
if(searchVal==""){
return val;
}else if (val.Name_of_College.toLowerCase().includes(searchVal.toLowerCase())){
return val;
}
}).map((val)=>{
return <div className="clgListDiv" > <p>
College Name: {val.Name_of_College} <br></br>
</p>
</div>
})}
</div>
}
export default App;

Answer 2

Best Practice in React:
import React, { useState, useEffect } from "react";
import "./App.css";
import Axios from "axios";
function App() {
const [searchVal, setSearchVal] = useState("");
//getting values from DB
const content = collegeList
.filter((val) => {
if (searchVal == "") {
return val;
} else if (
val.Name_of_College.toLowerCase().includes(searchVal.toLowerCase())
) {
return val;
}
})
.map((val) => {
return (
<div className="clgListDiv">
<p>
College Name: {val.Name_of_College} <br></br>
</p>
</div>
);
});
return (
<div>
<input
type="text"
placeholder="Search College"
onChange={(event) => {
setSearchVal(event.target.value);
}}
></input>
{content}
</div>
);
}
export default App;