Cant put dynamic content in tag

[salientknight]

I am new to React so this may just be missing something with syntax, but I can't seem to get dynamic content into this tag.

I've tried:

 <ScrollableAnchor id={'section1'}>
            item.map((course, index) => (

            <div><span>{course.prog.label} {course.prog.title}</span> </div>

            )),
        </ScrollableAnchor>

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `ScrollableAnchor`.

and several versions thereof. I've tried passing in variables. I've tried loading other tags. There doesn't seem to be any way to pass it dynamic content. Is this possible and I'm missing something? OR is this not designed with dynamic content in mind.

Thank you

[salientknight]

OK so it was Noobie error -- for the next in line I was missing a tag wrapper around the content inside the ScrollableAnchor

This worked:

 <div>
              <ScrollableAnchor id={item[0].currentLetter}>
           <div> <-- needed this
            <div>{item[0].currentLetter}</div> <-- and the brace {
                {item.map((course, index) =>  <-- my data changed a bit but this idea is the same
                <div> {course.prog.label}</div>

                )}
               </div> 
            </ScrollableAnchor>
        </div>

Sometimes being tenacious is all it takes.