Why a transition function in react is not able to render?

Question

• I have a prototype when we click that icon the text box opens..
• in the same way in my codebase I am trying to make my test box to close and open...
• here instead of icon in css I am using image
• i am using the same prototype code in my code base..
• but its not working...

• I think some problem with the below line div className={icon-search-container ${this.state.active ? 'active' : ''}}>

• in my protype code they are rendering at

• in my codebase I am not sure where to render -providing both the prototype and my codebase in fiddle
• i have even reduced the css but still not able to find out :(

prototype code - working http://codepen.io/tasssik/pen/yeGozR

Not working code http://codepen.io/anon/pen/zrymwq

main code to be fixed

 <div className={`icon-search-container ${this.state.active ? 'active' : ''}`}>

                        <a onClick={this.handleClick} href="javascript:;" className="fa fa-search sportsTopSection-navUtilities-search">
                            <span className="hidden">Search <abbr>NBA</abbr>.com</span>
                        </a>

                        <input type="text" ref='search'className="search-input" placeholder="Search" onBlur={() => this.setState({active: false})}/>

                        <span className="fa fa-times-circle"
                            onClick={() => this.setState({active: false})}>
                        </span>

                    </div>

Answer 1

The example of what isn't working is a bit long and messy, so maybe I missed it, but I don't think you are calling React.render(), so that is one big problem. Also, custom components must start with a capital letter: <SportsTopSection />, not <sportsTopSection/>.

Edit in response to cleaner code: Well, the short answer is "It isn't rendering because it is throwing an error first." Why is it erroring first? The error says "exports is not defined." I don't use CodePen, but I would be surprised if import and exports worked in it. Have you looked if that is the issue?