am new to react...i am finding very difficult in writing a simple animation
https://jsfiddle.net/n5Luz6ym/72/
react code
class sportsHeader extends React.Component {
constructor(props) {
super(props);
this.sportsSearchPanel = this.sportsSearchPanel.bind(this);
}
sportsSearchPanel() {
console.log("sportsSearchPanel" +this);
}
render() {
return (
<div className={'sportsHeader sportsHeader--' + this.props.layout} role="banner">
<div className="sportsHeader-NBA">
<a onClick={this.sportsSearchPanel} href="javascript:;" className="sportsHeader-NBA-search">
<span className="hidden">Search <abbr>NBA</abbr>.com</span>
</a>
<input className="sportsHeader-NBA-search-input" type="text" />
</div>
</div>
);
}
}
css
.sportsHeader-NBA-search-input {
border: 1px solid red;
display: none;
}
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>
i have fluxxor app with react 0.13 and react router 0.13. i want to update dependencies and use latest react with react-router 2. previously react router had an instance that i could pass to stores like this:
var router = Router.create({
routes: routes,
location: Router.HistoryLocation
});
var flux = new Fluxxor.Flux(getStores({router: router}), actions);
but now there is no such instance
i haven't yet understand how to make transitions from stores
hi,
Rx.Observable.fromPromise($.getJSON('https://api.github.com/users'))
.subscribe(users => {
console.log('users ready', users);
$('.pai-del-menu').hide();
var grid = $("#grid").kendoGrid({
dataSource: {
data:
hi,
http://sports.com/players/playersJumping
Error
HTTP Status 404 – Not Found
Type Status Report
Message /players/playersJumping
Description The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.
Apache Tomcat/8.5.23