react dynamic cards 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>