Why does child component do not re-render after prop change?

Question

I have a parent component which renders a list in a corousel (child component) from an array. When I try to re render the list on an event only the props gets changed in the child component and not the state which do not re renders the new list in the corousel.

From the dropdown menu, I select the list to be rendered which onclick changes the props of the child component.

export default class DetailsInfo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showText: false,
            bannerObj:{},
            selectedid : 0,
            selectedSeason:props.item.contentType==='WebSeries'?props.item.season[0].name:'',
            seasonObj:[{
                    "id": 1,
                    "name": "Session 1",
                    "parts": [
                      {
                        "id": 1,
                        "name": "abcc",
                        "discription": null,
                        "url": "http://www.demo.com"
                      },
                      {
                        "id": 2,
                        "name": "abcdd",
                        "discription": null,
                        "url": "http://www.demo.com"
                      },
                      {
                        "id": 3,
                        "name": "abcddd",
                        "discription": null,
                        "url": "http://www.demo.com"
                      }
                    ]
                  },
                {
                    "id": 2,
                    "name": "Session 2",
                    "parts": [
                      {
                        "id": 1,
                        "name": "se2ofe1",
                        "discription": null,
                        "url": "http://www.demo.com"
                      },
                      {
                        "id": 2,
                        "name": "se2ofe2",
                        "discription": null,
                        "url": "http://www.demo.com"
                      }
                    ]
                  }
            ]
        };
        this.handlechange = this.handlechange.bind(this);
    }

    handleOnDragStart = e => e.preventDefault()

    handlechange(event){
        const vid = this.state.seasonObj.find(o=>o.name===event.target.value).id;
        this.setState({
            selectedSeason : event.target.value,
            selectedid : vid-1
        })
    }


    render() {

        return (
            <Grid>


                <div className="maindiv">
                <div>
                        <Select onChange={this.handlechange} value={this.state.selectedSeason}>
                            {this.state.seasonObj.map(item => 
                                <MenuItem key={item.id} value={item.name} id={item.id}>{item.name}</MenuItem>
                            )}
                        </Select>
//this is were the selected id is passed to the props to child
                        {this.state.seasonObj[this.state.selectedid].id &&
                            <SliderItem item={this.state.seasonObj[this.state.selectedid].parts} />
                        }

                        </div>
                </div>
            </Grid>
        )
    }
}

// child class
export default class SliderItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: props.item
        }

    }

    render() {

        return (
            <React.Fragment>

                <AliceCarousel>
                    {this.state.list
                        .map((item) =>
                            <div key={item.id} >
                              <img alt={item.title} src={item.url}/>
                        </div>)}
                </AliceCarousel>
            </React.Fragment>
        )
    }
}

I need to have get the courosel list updated when select from the dropdown.

Answer 1

You have to use props in your AliceCarouse if you want it to be re-rendered:

<AliceCarousel>
  {this.props.item.map((item) => (
    <div key={item.id}>
      <img alt={item.title} src={item.url} />
    </div>
  ))}
</AliceCarousel>;