demo:
Search.js
Parent.js
child.js
subclasses.js
App.js
final code in text:::::
app.js
//////app.js
import React from 'react';
import './App.css';
import Parent from './components/parent';
function App() {
return (
<div className="App">
<Parent />
</div>
);
}
export default App;
//parent.js
import React from 'react';
import Child from './child';
//import React, { Component } from 'react'
export default class parent extends React.Component
{
constructor()
{
super();
this.state={
data : [
{
id : 1,
name : 'shoes',
img : 'shoes.jpg'
},
{
id : 2,
name : 'pant',
img : 'pant.jpg'
},
{
id : 3,
name : 'shirt',
img : 'shirt.png'
},
{
id : 4,
name : 'shocks',
img : 'sock.jpg'
},
{
id : 5,
name : 'jacket',
img : 'jacket.jpg'
}
]
}
}
render() {
return (
<div>
<Child
data ={this.state.data}
/>
</div>
)
}
}
import React, { Component } from 'react'
import Subclass from './subclass'
import './child.css'
import SearchBox from './SearchBox';
export default class child extends Component {
constructor (props){
super(props) ;
this.state = {
data: this.props.data,
searchdata : ""
}
}
updateSearch = (value) => {
this.setState({searchdata: value})
console.log(this.state.searchdata)
}
render() {
return (
<div className="container">
<SearchBox update={this.updateSearch} />
<div className="grid-container">
{
this.state.data &&
this.state.data.filter((val)=> {
if(this.state.searchdata == "") {
return val
} else if(val.name.toLowerCase().includes(this.state.searchdata.toLowerCase())) {
return val;
}
}).map(
d => {
return(
<div key={d.id}>
<Subclass
name={d.name}
image={d.img}
id={d.id}
/>
</div>
)
}
)
}
</div>
</div>
)
}
}
//subclasses
import React, { Component } from 'react'
import {Card} from "react-bootstrap";
import './subclass.css';
export default class subclass extends Component {
render() {
return (
<div className="cardbox">
<div className="card-container">
<Card style={{ width: '18rem' }} className="box">
<Card.Img variant="top" src="holder.js/100px180" src={this.props.image} />
<Card.Body>
<Card.Title>Name : {this.props.name}</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
</Card.Body>
</Card>
</div>
</div>
)
}
}
//subclasses.css
.card-container {
margin-top: 40px;
margin-left: 100px;
border-radius: 4px;
padding: 25px;
cursor: pointer;
-moz-osx-font-smoothing: grayscale;
backface-visibility: hidden;
transform: translateZ(0);
transition: transform 0.25s ease-in-out;
}
.card-container:hover{
transform : scale(1.05);
}
.cardbox{
}
//////search.js
import React from 'react';
import './SearchBox.css';
export default function SearchBox(props) {
const SetValue = (a) => {
props.update(a);
}
return (
<div>
<div className="control">
<input className="input" type="text" onChange={(e) => {SetValue(e.target.value)}} placeholder="Search here...." />
</div>
</div>
);
}
//search.css
.input{
width: 20%;
height:25%;
margin-top: 10px;
border: 2px solid black;
}
Comments
Post a Comment