Losing Animation After Creating A Component

I want to use the 'Tabs' component created in 'Material UI'. 'Material UI' tabs demo: https://material-ui.com/components/tabs/ render() {

Solution 1:

I think this is happening because the state is held in the parent and it will cause a complete re-render every time the state changes so you wont see an animation.

You could have the state in the NewTabs instead of passing it in from the parent?

classNewTabsextendsReact.Component{

   handleChange = () => {
      this.setState({
        value: !this.state.value
      })
    }

  render(){
   return (
    <div><Tabsvalue={state.value}onChange={this.handleChange}
      ><Tablabel={props.firstLabel} /><Tablabel={props.secondLabel} /></Tabs></div>

   )
  }
}

classAppextendsReact.Component{
  render() {
    <div><NewTabsfirstLabel= "First test label"secondLabel = "Second test label"
       /></div> 
  }
}

Share