> For the complete documentation index, see [llms.txt](https://asad-razvi.gitbook.io/javascript-cookbook/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://asad-razvi.gitbook.io/javascript-cookbook/react-recipes/how-can-i-code-the-render-method.md).

# How can I conditionally render JSX?

```jsx
// Approach1
const FullName = (props) => {
    const { firstName, lastName, title } = props    
    // Elided code...
}

const NameHolder = (props) => {
    const { firstName, lastName, title } = props
    // High Complexity (Imperative Style)
    return ({ firstName && lastName && title && <FullName {...{firstName, lastName, title }}/> })
}
```

```jsx
// Approach2
const FullName = (props) => {
    const { firstName, lastName, title } = props    
    // Elided code...
}

const NameHolder = (props) => {
    const { firstName, lastName, title } = props
    const isVisible = (firstName && lastName && title)
    // Medium Complexity (Hybrid Style)
    return ({ isVisible && <FullName {...{firstName, lastName, title }}/> })
}
```

```jsx
// Approach3
const FullName = (props) => {
    const { firstName, lastName, title, isVisible } = props    
    if (!isVisible) return null
    // Elided code...
}

const NameHolder = (props) => {
    const { firstName, lastName, title } = props
    const isVisible = (firstName && lastName && title)
    // Low Complexity (Declarative Style)
    return (<FullName {...{firstName, lastName, title, isVisible }}/>)
}
```