React map how to remove empty elements?

I have objects, some of these objects have different properties when the map renders empty elements for me https://ibb.co/BGnB0xL How can I remove these empty elements? maybe you need to use filter or something else?

JavaScript_Lessons_Objects.js

import React from "react";
import jsStyle from  "./css/JavasCript_Lesson.module.css";
import {faDotCircle} from "@fortawesome/free-solid-svg-icons/faDotCircle";

const one = "Robby";

function JavaScriptLessonObject() {

    return (
        [
            {
                title: [<div><span className={jsStyle.title}>JSON OBJECTS</span></div>],
            },

            {
                titleName: "JS Introduction",
                iconName: faDotCircle,
                description: [
                    <span className="yourClass">{one}</span>,
                    ` advanced diverted domestic sex repeated bringing you old.`
                ],
            },

            {
                titleName: "JS Where To",
                iconName: faDotCircle,
                description: [
                    <span className="yourClass">{one}</span>,
                    ` advanced diverted domestic sex repeated bringing you old.1`
                ],
            },

            {
                title: [<div><span className={jsStyle.title}>JSON OBJECTS</span></div>],
            },

            {
                titleName: "JS Output",
                iconName: faDotCircle,
                description: [
                    <span className="yourClass">{one}</span>,
                    ` advanced diverted domestic sex repeated bringing you old.`
                ],
            },

        ]
    );
}

export default JavaScriptLessonObject;

Lesson.jsx

import React from 'react';
import less from "./css/lesson.module.css";
import "./css/betaLesson.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Navbar } from "../../../Navbar/Navbar";

export class Lessons extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            indexDescription: 0,
        }
    }

    render() {
        const listLessons = this.props.lesson.map((item, index) => {
            return (
                <div key={index}>

                    <li style={{background: "#ffa50070"}}>
                        <div>
                        {item.title ? item.title : <p style={{background: 'indianred'}}>empty elements'</p>}
                        </div>
                    </li>
                    
                    <li onClick={() => { this.setState({ indexDescription: index }) }}>
                        <div className={less.sidebar_list}>
                            <div>
                                <FontAwesomeIcon className={less.item_icon} icon={item.iconName} />
                            </div>

                            <div className={less.titleName}>
                                <div>
                                    <p>{item.titleName}</p>
                                </div>
                            </div>
                        </div>
                    </li>
                </div>
            );
        });

        return (
            <>
                <div className="abc">
                    <div className={less.wrapper}>
                        <div>
                            <div className={less.sidebar}>
                                <div>
                                    <ul>
                                        {listLessons}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </>
        );
    }
}

I think the problem is clear when I added to the heading object: [<div> <span className = {jsStyle.title}> JSON OBJECTS </span> </div>], I got empty paragraphs. I specially set the color orange to make it easier to navigate, besides, I added some code at the end. Please pay attention to this { !!item.title && <li>more code here</li>} and here is the result https://ibb.co/JRKY2dx I need to get rid of Blank paragraphs

Answer

If you are simply trying to conditionally render the list item with the item title you don’t have to use a ternary.

Inline If with Logical && Operator

{item.title && (
  <li style={{background: "#ffa50070"}}>
    <div>
      {item.title}
    </div>
  </li>
)}

And since it seems that titleName also conditionally renders a list item

{item.titleName && (
  <li onClick={() => { this.setState({ indexDescription: index }) }}>
    <div className={less.sidebar_list}>
      <div>
        <FontAwesomeIcon className={less.item_icon} icon={item.iconName} />
      </div>
      <div className={less.titleName}>
        <div>
          <p>{item.titleName}</p>
        </div>
      </div>
    </div>
  </li>
)}

To also remove a bit of DOM noise (and not inject empty divs on the off-hand case that no list items are rendered), I also suggest returning the list items (li) in a React Fragment.

const listLessons = this.props.lesson.map((item, index) => {
  return (
    <Fragment key={index}>
      ...
    </Fragment>
  );
};

Advertisement

Answer