Reactjs меняет содержимое в div с помощью onclick из другого компонента

Question

Я новичок, чтобы реагировать, и у меня возникла проблема с проблемой.

У меня есть один компонент (film.js), у которого есть массив объектов карты, и, щелкая по каждому из них, я хотел бы изменить {komponentaFilma} в зависимости от того, какой из элементов был выбран.

Моя логика может быть совершенно неверной, поэтому не стесняйтесь указывать мне правильное направление, спасибо.

app.js

      render() {

    let komponentaFilma = null;
    if ( this.state.prikaziFilmCont ) {
      komponentaFilma = (
        <div className="trailer_container">
          <p>Ovo je film koji je kliknut</p>
        </div>
      );
    }


    return (
      <div>
      <div className="movies-container">
        {this.state.filmovi.map((film, index) => {
          return <Film
                    naslov={film.naslov}
                    naslovnaSlika={film.naslovnaSlika}
                    key={film.id}
                    openFilm={() => this.injectFilm(index)}/>
      })}
      </div>
      <Gallery />
      {komponentaFilma}
      </div>
    );
  }

Я также использую этот метод в приложении.js

  injectFilm = (filmIndex) => {
    const prikaziFilm = this.state.prikaziFilmCont;
    this.setState({prikaziFilmCont: !prikaziFilm})
  }

также имеет

prikaziFilmCont: false

в состоянии

film.js выглядит следующим образом

const Film = (props) => {
  return (
      <div onClick={props.openFilm} className="singleMovie">
        <h3>{props.naslov}</h3>
        <img src={props.naslovnaSlika} alt="nova slika "/>
      </div>
  )
}

этоУкажите в моем app.js эти объекты, по которым щелкнули, и я хотел бы передать информацию об этих объектах (onclick) в komponenta filma.

  state = {
    filmovi: [
      {
        "naslov": "Safarikova",
        "id": "00",
        "naslovFilma": "Safarikova",
        "godina": "Safarikova",
        "opis": "Lorem ipsum dolor sit ....",
        "naslovnaSlika": "http://dusanmuncan.underconstructioncity.com/srdjan_susa/images/safarikova.png",
        "linkVideo": "http://video/video.mp4",
        "externiLink": "http://www.vimeo.com/video.mp4"
      }, {
        "naslov": "Svetski sampion",
        "id": "01",
        "naslovFilma": "Sampion",
        "godina": "Safarikova",
        "opis": "Cupcake ipsum color sit pinaple juice ....",
        "naslovnaSlika": "http://dusanmuncan.underconstructioncity.com/srdjan_susa/images/trailer_prvaksveta.png",
        "linkVideo": "http://video/videosampoion.mp4",
        "externiLink": "http://www.vimeo.com/videosampion.mp4"
      }, {
        "naslov": "Stolice",
        "id": "02",
        "naslovFilma": "stolicice malene",
        "godina": "stolice ",
        "opis": "sede ljudi na stolicama i na kraju ustanu",
        "naslovnaSlika": "http://dusanmuncan.underconstructioncity.com/srdjan_susa/images/trailer_stolice.png",
        "linkVideo": "http://video/stolice.mp4",
        "externiLink": "http://www.vimeo.com/sto_lice.mp4"
      }
    ],
    prikaziFilmCont: false
  }

если вам нужно что-то еще от меня, напишите.

Answer 1

Вы можете добавить свойство selectedFilm в вашем штате

state: {
  ...... // other properties in state
  selectedFilm: {}
}

Вам нужно найти фильм, по которому щелкнули, и установить этот фильм как selectedFilm в состоянии в компоненте App.так что измените injectFilm

injectFilm = (filmIndex) => {
    // const prikaziFilm = this.state.prikaziFilmCont;
    // finding the film clicked 
    const selectedFlim = this.state.filmovi.find((film, index) => index === filmIndex)
    this.setState((prevState) => ({
        // prikaziFilmCont: !prevState.prikaziFilm,
       selectedFlim
    }))    
  }

И вы можете обновить свое if условие и использовать selectedFlim

// checking if "selectedFlim" is empty object or not
// if it is not empty then use "komponentaFilma" as below jsx
// otherwise "komponentaFilma" will be null
let komponentaFilma = null;
if ( Object.keys(this.state.selectedFilm).length > 0 ) {
      komponentaFilma = (
        <div className="trailer_container">
          <p>{this.state.selectedFlim.id}</p>
          <p>{this.state.selectedFlim.naslovFilma}</p>
        </div>
      );
    }

И наконец вы можете использовать komponentaFilma в вашем jsx

return (
      <div>
      <div className="movies-container">
        {this.state.filmovi.map((film, index) => {
          return <Film
                    naslov={film.naslov}
                    naslovnaSlika={film.naslovnaSlika}
                    key={film.id}
                    openFilm={() => this.injectFilm(index)}/>
      })}
      </div>
      <Gallery />
      // checking if "selectedFlim" is empty object or not
      // if it is empty then nothing is displayed
      // otherwise "komponentaFilma" will be displayed
      {Object.keys(this.state.selectedFilm).length > 0 && komponentaFilma}
      </div>
    );

Примечание: вы можете использовать KomponentaFilma в качестве компонента и передать selectedFilm в качестве реквизита

например:

{Object.keys(this.state.selectedFilm).length > 0 && <KomponentaFilma selectedFilm={this.state.selectedFilm />}

KomponentaFilma компонент может быть

const KomponentaFilma = ({selectedFilm}) => {
   return (
     <div>
       <p>{selectedFlim.id}</p>
       <p>{selectedFlim.naslovFilma}</p>
     </div>
   )
}