This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
interface Result { | |
moveLens: (event: React.MouseEvent<any, MouseEvent>) => void; | |
imgContainerDimesions: { | |
height: string, | |
width: string, | |
position: 'relative' | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const jobsTitleList = [ | |
"Product Manager", | |
"React Engineer", | |
"NodeJS Engineer", | |
"Python Engineer" | |
]; | |
function App() { | |
return ( | |
<div className="App"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const jobs = [ | |
{ | |
title: "Product Manager", | |
description: | |
"Suspendisse volutpat in quam cras vestibulum eleifend condimentum." | |
}, | |
{ | |
title: "React Engineer", | |
description: | |
"Suspendisse volutpat in quam cras vestibulum eleifend condimentum." |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/**JSX need to be wrapped inside some containing element | |
in Reactjs **/ | |
jobs.map(() => { | |
return ( | |
<div> | |
<h3>{title}</h3> | |
<p>{description}</p> | |
</div> | |
) | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function Job({ job }) { | |
const { title, description } = job | |
return ( | |
<> | |
<h3>{title}</h3> | |
<p>{description}</p> | |
</> | |
) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
jobs.map((job, index) => { | |
return <Job key={index} job={job} /> | |
}) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function Job({ job }) { | |
const { title, description } = job; | |
const valueLocalToThisComponent = 1 | |
return ( | |
<> | |
<h3>{title}</h3> | |
<p>{description}</p> | |
<p>{valueLocalToThisComponent}</p> | |
</> | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function Job({ job }) { | |
const { title, description } = job; | |
const [shouldShowDescription, setShouldShowDescription] = useState(false); | |
function handleClick(e) { | |
setShouldShowDescription(shouldShowDescription ? false : true); | |
} | |
return ( | |
<> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function FilterJobs({ value }) { | |
return ( | |
<input | |
value={value} | |
/> | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function JobsList() { | |
return jobs.map((job, index) => { | |
return <Job key={index} job={job} /> | |
}) | |
} | |
function App() { | |
return ( | |
<div className="App"> | |
<JobsList value={value} /> | |
</div> |
OlderNewer