Отображение PDF-файлов из массива методом карты

Question

Я пытаюсь отобразить PDF-файлы, когда пользователь щелкает опцию раскрывающегося меню, соответствующую сложности, связанной с PDF-файлами. У меня они в массивах, как объекты для каждой трудности. Я хочу показать изображения, но я не уверен, как.

let beginner = [
  {name: 'Music City', image: './assets/MusicCity.pdf'},
  {name: 'Pacific Crest', image: './assets/PacificCrest.pdf'},
  {name: 'Troopers', image: './assets/Troopers.pdf'}
];

let intermediate = [
  {name: 'Blue Devils', image: './assets/BlueDevils.pdf'},
  {name: 'Mandarins', image: './assets/Mandarins.pdf'},
  {name: 'Star of Indiana', image: './assets/StarOfIndy.pdf'}
];

let advanced = [
  {name: 'Cadets', image: './assets/Cadets.pdf'},
  {name: 'Bluecoats', image: './assets/Bluecoats.pdf'},
  {name: 'Santa Clara Vanguard', image: './assets/SCV.pdf'}
];

let displayMusic = (item) => {
  let music = [item.name, item.image].join(' ');
  return music;
}

const checkSkill = (skill) => {
  // console.log(skill);

  if (skill === 'beginner') {
    return(beginner.map(displayMusic))
  } else if (skill === 'intermediate') {
    return(intermediate)
  } else if (skill === 'advanced') {
    return(advanced)
  } else {
    return(null)
  }
}; 

JSX

 <DropdownMenu>
        <DropdownItem header>Selet a skill level</DropdownItem>
        <DropdownItem onClick={(e) => checkSkill(e.target.value)} value="beginner">Beginner</DropdownItem>
        <DropdownItem onClick={(e) => checkSkill(e.target.value)} value="intermediate">Intermediate</DropdownItem>
        <DropdownItem onclick={(e) => checkSkill(e.target.value)} value="advanced">Advanced</DropdownItem>
      </DropdownMenu>

Answer 1

Как я и предполагал, вам нужно отобразить ваше musicName, которое вы можете объявить в вашем конструкторе (если вы используете ES6) следующим образом:

class yourClass extends React.Component {
     constructor(props){
         super(props);
         this.state = {
             music: null
         } 
     }
}

затем

const checkSkill = (skill) => {
  if (skill === 'beginner') {
    this.setState({
        music: displayMusic()
    })
  }
  ...

и в вашемrender Вы можете получить название музыки с this.state.music

render(){
    return <p>{this.state.music}</p>
}