Question 276785 in Html Question posted in
Some basic documentation can be found here.

Html – apply style on element 1 adjacent to element 2 if element 2 child is shown

how can i achieve this ?

 const element = () => {

   return <div>
     <Container1 />
     <Container2 />
  </div>
}

 const Container1 = () => {
   return  <div className="container-1"></div>
}

 const Container2 = () => {
   const [preview,setPreview] = useState(true)

   return 
     <div className="container-2">
       {preview ? <div className="preview"></div> : ""}
  </div>
}

so what i want is that if preview is shown then apply style on container-1 and if it’s achievable with css

Tags:

2

Answers


  1. 0

    Easiest way will be

    <div className={preview ? "container-1" : ""}></div>
    Login or Signup to reply.
  2. 0

    Try this example

    import React, { useState } from 'react';

const Element = () => {
  const [preview, setPreview] = useState(true);

  return (
    <div>
      <div className={`container-1 ${preview ? 'container-1-preview-shown' : ''}`}></div>
      <div className="container-2">
        {preview ? <div className="preview"></div> : null}
      </div>
    </div>
  );
};

export default Element;

    .container-1-preview-shown {
  border: 2px solid red;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search