How to put two or more values from two columns in a database table into a <datalist> value att-CodePudding

I have a dropdown select datalist needs to contain the value combination from 2 columns in a database table.

I was tried this way:

function AttendCourseSelect({courses}) {

    const courseName = {course.name}   "-"   {course.level};

    return (
        <div className="col-sm col-md col-lg">
            <label htmlFor="CourseName">Course: </label>
            <input type="text" list="courses"/>
            <datalist id="courses">
                {courses.map(((course) => {
                    return <option value={courseName} />
                }))}
            </datalist>
        </div>
    )
}

export default AttendCourseSelect;

But the courseName syntax is not correct here. Anyone could help me?

CodePudding user response：

You shouldn't use {} when accessing/using values out side of return.

const courseName = course.name "-" course.level;

or you could use Template literals (Template strings)

const courseName = `${course.name}-${course.level}`;