How to use ternary operator inside map

Apparently, your outermost div does not have a closing tag, thus resulting in an error.

Also, you're missing a return statement.

return (
        <div className="Card">
            <div className="TableTopbar ScheduleGrid">
                <div>id</div>
                <div>interval</div>
                <div>project_id</div>
                <div>database</div>
                <div>create_timestamp</div>
                <div>create_user_id</div>
                <div>Edit</div>
            </div>

            {scheduleData.map((schedule) => {
                return UsageMode === "Read" ? (
                    <div className="Table ScheduleGrid">
                        <div>{schedule.id}</div>
                        <div>{schedule.interval}</div>
                        <div>{schedule.project_id}</div>
                        <div>{schedule.database}</div>
                        <div>{schedule.create_timestamp}</div>
                        <div>{schedule.create_user_id}</div>
                        <div>
                            <EditIcon
                                style={{
                                    padding: "2px",
                                    width: "0.8em",
                                    height: "0.8em",
                                    marginRight: "5px",
                                }}
                                className="CircleButton"
                                onClick={onEditScheduleClick}
                            />
                        </div>
                    </div>
                ) : (
                    <div>ID</div>
                );
            })}
        </div>
    );

Try this code. Should work.