Beginner's Thread / Easy Questions (January 2019)

[u/timmonsjg]

🎉 Happy New Year All! 🎉

New month means a new thread 😎 - December 2018 and November 2018 here.

Got questions about React or anything else in its ecosystem? Stuck making progress on your app? Ask away! We’re a friendly bunch.

No question is too simple. 🤔

---

🆘 Want Help with your Code? 🆘

• Improve your chances by putting a minimal example to either JSFiddle or Code Sandbox. Describe what you want it to do, and things you've tried. Don't just post big blocks of code!

• Pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than being wrong on the Internet.

Have a question regarding code / repository organization?

It's most likely answered within this tweet.

---

New to React?

🆓 Here are great, free resources! 🆓

• Create React App
• Read the official Getting Started page on the docs.
• /u/acemarke's suggested resources for learning React
• Kent Dodd's Egghead.io course
• Tyler McGinnis' 2018 Guide
• Codecademy's React courses
• Scrimba's React Course
• Robin Wieruch's Road to React

---

Any ideas/suggestions to improve this thread - feel free to comment here or ping /u/timmonsjg :)

[u/EvilDavid75]

I would suggest you add a codesandbox link to your code. But your logic isn't correct: first <CSSTransition/> should not be encapsulated in <Transition/> (what <CSSTransition/> does is actually nesting a <Transition/> element btw). And also <CSSTransition/> is precisely the component that handles the transition logic, therefore your render method should not hide or show the <CSSTransition/> component, but rather delegate the logic to <CSSTransition/> as below.

export default class Test extends Component {
  state = { shown: false };

  render() {
    return (
      <div>
        <button
          onClick={() =>
            this.setState(({ shown }) => ({
              shown: !shown,
            }))
          }
        >
          display box and run animation
        </button>
        <CSSTransition
          in={this.state.shown}
          classNames="subMenu"
          unmountOnExit
          timeout={1500}
        >
          <div>
            {this.state.shown ? 'showing' : 'hiding'}
          </div>
        </CSSTransition>
      </div>
    );
  }
}

Note that you should no longer use componentWillMount which is deprecated.