simbathesailor

interface Result {
  moveLens: (event: React.MouseEvent<any, MouseEvent>) => void;

  imgContainerDimesions: {
    height: string,

    width: string,

    position: 'relative'
  };

simbathesailor

const jobsTitleList = [
  "Product Manager",
  "React Engineer",
  "NodeJS Engineer",
  "Python Engineer"
];

function App() {
  return (
    <div className="App">

simbathesailor

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."

simbathesailor

/**JSX need to be wrapped inside some containing element
in Reactjs **/
jobs.map(() => {
  return (
    <div>
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  )
})

simbathesailor

function Job({ job }) {
  const { title, description } = job
  return (
    <>
      <h3>{title}</h3>
      <p>{description}</p>
    </>
  )
}

simbathesailor

{
  jobs.map((job, index) => {
    return <Job key={index} job={job} />
  })
}

simbathesailor

function Job({ job }) {
  const { title, description } = job;
  const valueLocalToThisComponent = 1
  return (
    <>
     <h3>{title}</h3>
     <p>{description}</p>
      <p>{valueLocalToThisComponent}</p>
    </>
  );

simbathesailor

function Job({ job }) {
  const { title, description } = job;
  const [shouldShowDescription, setShouldShowDescription] = useState(false);

  function handleClick(e) {
    setShouldShowDescription(shouldShowDescription ? false : true);
  }

  return (
    <>

simbathesailor

function FilterJobs({ value }) {
  return (
    <input
      value={value}
    />
  );
}

simbathesailor

function JobsList() {
  return jobs.map((job, index) => {
    return <Job key={index} job={job} />
  })
}
function App() {
  return (
    <div className="App">
      <JobsList value={value} />
    </div>