I'm trying to make a components props(sideBarInfo) details show up on the left column of a Page after clicking on a corresponding component(thumbnail) on the right column of the same Page.

Please note that all imports and exports are used in the main project(i removed them here).
I've also imported all components into the main (Page.js). Yet i keep getting a Type error for the onClick.

This is the first component - *Thumbnail*

```
class Thumbnail extends React.Component {
    render(){
      return (
        <div className="Work" onClick={(e) => this.props.click(this.props.work)} >
            <div className="image-container">
              <img src={this.props.work.imageSrc} alt={this.props.work.imageSrc}/>
            </div>
            <div className="Work-information">
            <p> {this.props.work.work}</p>
            </div>
        </div>
      );
      } }

```

This is the *ThumbnailList*

```
    class ThumbnailList extends React.Component {
constructor(props){
super(props);
this.state= {
  works: [
      {
      id: 0,
      work: 'Work 1',
      imageSrc: W1,
      view: '#',
      selected: false
    },
      {
      id: 1,
      work: 'Work 2',
      imageSrc: W2,
      view: '#',
      selected: false
        },         
      ]
    }
  }

      handleCardClick = (id,card) => {
        console.log(id);

        let works= [...this.state.works];

        works[id].selected = works[id].selected ? false : true ;

        works.forEach(work=>{
          if(work.id !== id){
            work.selected = false;
          }
        });

        this.setState({
          works
        })
      }

      makeWorks = (works) => {
        return works.map(work => {
          return <Thumbnail work={work} click={(e => this.handleCardClick(work.id,e ))} key={work.id} />
        })
      }

      render(){
        return(
          <div>
            <div className="scrolling-wrapper-flexbox">
              {this.makeWorks(this.state.works)}
            </div>
          </div>
        );
      }
  }

```

This is the *sidebarInfo*

```
function SidebarInfo(props) {
return (
  <img width="370" height="370" src= {props.imageSrc} />
    <p> {props.work} </p>
);}

```

This is the problematic *Page* - the boldened keeps giving a Type error(cannot read property 'selected' of undefined.)

```
class Page extends React.Component {

render() {
  return (
      <span>

      <div className="column left">
      <div className="">
      **{this.props.work.selected && <SidebarInfo imageSrc={this.props.imageSrc} /> }**
      </div>
      </div>

      <div className="column right" >
            <div>
                <ThumbnailList  />
            </div>
         </div>
      </span>
      )
    }
  }

```