Dynamic Card Layout in JSX/React js code example

Example 1: how to create a row of cards with api data

renderTrails = () => {    console.log("TRAILS", this.props.trails.trails)    if(this.props.trails.trails){      const trail= this.props.trails.trails.map(t => {        return(            <div className="card" style={{width: 30 + 'rem' }}>              <img className="card-img-top" src={t.imgSqSmall ? ( t.imgSqSmall) : ("http://appalachiantrail.org/images/default-source/default-album/trailfocus.jpg?sfvrsn=2")} />                <div className="card-body">                  <h1 className="card-title">{t.name}</h1>                    <h2 className="card-text">{t.location} </h2>                      <h4 className="card-text">{t.summary} </h4>

Example 2: how to create a row of cards with api data

<ul className="list-group list-group-flush">  <li className="list-group-item">Difficulty: {t.difficulty}</li>  <li className="list-group-item">Length: {t.length} miles</li>  <li className="list-group-item">Ascent: {t.ascent} ft, Descent:  {t.descent} ft</li> <li className="list-group-item">Conditions: {t.conditionStatus}, {t.conditionDetails} </li> <li className="list-group-item">High: {t.high} ft, Low: {t.low}</li> <li className="list-group-item">Stars: {t.stars}</li> <li className="list-group-item"><a href={t.url} target="_blank"    rel="noopener noreferrer" className="card-link">Trail Information</a></li></ul>