Ytukyg

{ Object.keys(props.data).map((key, value) => {





  return(

         <div>

            <dt className="col-sm-3">{key}</dt>

            <dd className="col-sm-9">{props.data[key]}</dd>

         </div>

        )

  })}

The above code creating the following:

Key

Value

when hardcoding the above without the div wrapper element i'm getting:

Key           value

the full code chunk:

 <div className="row">

            <div className="col-lg-6">

                <div className="mb-5">

                    <h5 className="text-black">

                        <strong>{props.title}</strong>

                    </h5>

                    <dl className="row">

                        <dt className="col-sm-3">A</dt>

                        <dd className="col-sm-9">A</dd>

                    </dl>

                </div>

            </div>

        </div>

So my issue id the div wrapper element, is there a way to use map for rendering dynamic data without returning the div wrapper element?

Thinking semantically, it would be good idea to wrap with dl:

return(

  <dl>

    <dt className="col-sm-3">{key}</dt>

    <dd className="col-sm-9">{props.data[key]}</dd>

  </dl>

)

But looking at the code you're already defining dl and inside that you're using the component?

If you don't like the above solution only then you should use React.Fragment: (Use the above as far as possible)

return(

  <> {/* alias for React.Fragment */}

    <dt className="col-sm-3">{key}</dt>

    <dd className="col-sm-9">{props.data[key]}</dd>

  </>

)

Ah, you also need to provide key props:

<dl key={key}>

Or, using Fragment:

<React.Fragment key={key}>

The following is invalid use: (shorthand method doesn't support any props)

<key={key>

</>