score:0

working solution:

import react, { component, fragment } from 'react';

export default class cardcontainer extends react.component {   
    render() {

        var arr = [
            {
                'id':1,
                'title':'title',
                'value':'test_value'
            }
        ]

        return (
            <div> 
                {arr.map((el, idx) => (
                    <fragment>
                        <card title={ el.value } />
                        <cardextension value={ el.title } />
                    </fragment>
                ))}
            </div>
        );
    }
}

score:0

the error message "adjacent jsx elements must be wrapped in an enclosing tag" means just that: the <card> and <cardextension> elements need to be wrapped in a parent tag.

now, you probably don't want to wrap the elements in a <div> (since it would create unnecessary dom nodes), but react has a nifty thing called "fragments", letting you group elements without extra nodes.

here is a working solution for your example, using the fragment short syntax:

class cardcontainer extends react.component {   
  render() {
    var arr = [{
      'id':1,
      'title':'title',
      'value':'test_value'
    }]

    return (
      <div>
        {arr.map((el, idx) => (
          <>
            <card title={ el.value } />
            <cardextension value={ el.title } />
          </>
        ))}
      </div>
    );
  }
}

Related Query

More Query from same tag