I would like to create a “card style” list of workouts. The mode is one of a handful of types: run, bike, swim, strength, rest, stretch for example. There is an icon with each exercise mode.
I can insert the proper icon like I have show below (see “this works” section).
However when I try to abstract the data into a JSON file and import it into the App.js file, I am stumped on the best way to get the img URLs for the icons. Passing them as props seems to be a mystery, and I’m getting confused about relative vs absolute URIs for the icons, which are located in the img folder. App.js is in the root, and the components are in /src/components/
Let me know if this is enough info to understand my question.
Folder Structure
root
App.js
-src
–components
—DailyWorkouts.js
—WorkoutList.js
-img
–runImg.png
This works:
App.js
import React from 'react'
import WorkoutList from './components/WorkoutList'
import Header from './components/Header'
// import DailyWorkout from './components/DailyWorkout'
import runImg from './img/run.png'
class App extends React.Component {
render() {
return (
<div>
<WorkoutList
dailyData={[
{
mode: 'run',
size: '24px',
distance: 3,
units: 'miles',
icon: runImg
}
]}
/>
</div>
)
}
}
export default App
WorkoutList.js
class WorkoutList extends React.Component {
render() {
return (
<div>{
this.props.dailyData.map((dailyData,i) => {
return (
<DailyWorkout
key={i}
mode={dailyData.mode}
icon={dailyData.icon}
/>
)
})
}
</div>
)
}
}
DailyWorkout.js
class DailyWorkout extends React.Component {
render() {
return (
<div >
<img
alt={this.props.mode}
src={this.props.icon}
/>
<span>
{this.props.mode}
</span>
</div>
)
}
}
However, this does not
App.js
import WorkoutList from './components/WorkoutList'
import runImg from './img/run.png'
import bikeImg from './img/bike.png'
import swimImg from './img/swim.png'
import dailyWorkouts from './dailyWorkouts'
class App extends React.Component {
render() {
return (
<div>
<WorkoutList
dailyData={dailyWorkouts}
/>
</div>
)
}
}
dailyWorkouts.json
[
{
"mode": "run",
"size": "24px",
"distance": 3,
"units": "miles",
"icon": "runImg"
}, {
"mode": "bike",
"size": "24px",
"distance": 24,
"units": "miles",
"icon": "bikeImg"
},
{
"mode": "swim",
"size": "24px",
"distance": 3000,
"units": "meters",
"icon": "swimImg"
}
]
I have tried passing in the same URL that worked in the example above within the JSON file, instead of the name assigned in the import section of App.js
This seems like a simple thing but I’m stumped. I feel like I shouldn’t have to pass the URL in, because there are a limited number of exercise modes, and the icon always remains the same for each mode (running figure for a run workout, swimming figure for swim workout, etc)