React 中的类名

Question

I've a react code as shown below in which I want to add a className at Line Z conditionally in React when Line A doesn't render anything

When Line A doesn't render anything, I want to add className hide (at Line Z) (hide { display: none }) so that it can hide the entire abc-def div . I found a solution from their official website but I am unable to integrate it in my code above.

https://reactjs.org/docs/faq-styling.html#how-do-i-add-css-classes-to-components

Answer 1

Use inline styling with conditions as you wanted.

Answer 2

Instead off calling those functions inline, consider calling them before the render() function, so you can check the contents;

const renderPrograms = () => {
    return programs.map((program, index)=>{
        return (
            <a href={program.url} key={index}>
                <div className="program" >
                    <div class="hello-world">{program.name}</div>
                </div >
            </a>
        )
    })
}

const lineA = programs && renderPrograms();
const lineBClassName = (!lineA) ? ' hide' : '';

return(
    <div class="parent-div">
        <div className ="pqr-xyz">  
            <h5>Hello World</h5>            
        </div>
        <div className={"abc-def" + lineBClassName}>        
            <h5>Programs</h5>
            {lineA}
        </div>
    </div> 
)

Answer 3

Since programs is an array, you can check it first

This is a conditional rendering solution

return(
 <div class="parent-div">
  <div className ="pqr-xyz">  
     <h5>Hello World</h5>            
  </div>
  {programs.length && 
  <div className="abc-def hello-world">
     <h5>Programs</h5>
    {renderPrograms()}
   </div>}
 </div> 
 )

Conditional class solution

return(
 <div class="parent-div">
  <div className ="pqr-xyz">  
     <h5>Hello World</h5>            
  </div>
  // if the length is 0 or the array is empty then add hide class
  <div className={`abc-def ${!programs.length && "hide"}`}>
     <h5>Programs</h5>
    {programs.length && renderPrograms()}
   </div>
 </div> 
 )

Anyway, You can also check classnames library, it's more effective way to add conditional class in react