I want to make a component of the reactor that would serve as a footer for the web page. In the react-bootstrap documentation, I found mention of the footer only in conjunction with a modal window (this component also has a header and footer). Also found just such a thing , but screw it did not work. Please tell me how you can solve this issue, maybe there is some tutorial on the basis of which this can be implemented? the code of my component (deleted lists of ul lists for better code perception):

const SearchBar = React.createClass({ _onChange: function (e) { this.props.onChange(e); }, render: function () { return ( <FormGroup> <InputGroup> <FormControl type="text" placeholder="Search..." name={name} onChange={this._onChange} /> <FormControl.Feedback /> <InputGroup.Button> <Button bsStyle="danger"><span className="glyphicon glyphicon-search"> </span></Button> </InputGroup.Button> </InputGroup> </FormGroup> ); } }); const IconBar = React.createClass({ render: function () { return ( <div className="row"> <div className="col-md-2"> <a href="" aria-hidden="true"> <Image src="/img/icons/facebook.png" responsive/> </a> </div> <div className="col-md-2"> <a href="" aria-hidden="true"> <Image src="/img/icons/googleplus.png" responsive/> </a> </div> <div className="col-md-2"> <a href="" aria-hidden="true"> <Image src="/img/icons/twitter.png" responsive/> </a> </div> <div className="col-md-2"> <a href="" aria-hidden="true"> <Image src="/img/icons/linkedin.png" responsive/> </a> </div> <div className="col-md-2"> <a href="" aria-hidden="true"> <Image src="/img/icons/yahoo.png" responsive/> </a> </div> </div> ); } }); var Footer = React.createClass({ render: function () { var footerStyle = { color: 'white', backgroundColor:'#4b4a45' }; return ( <div className="container-fluid" style={footerStyle}> <div className="col-md-4"> <div className="row"> <div className="col-md-5"> <ul> </ul> </div> <div className="col-md-5"> <ul> </ul> </div> </div> </div> <div className="col-md-4"> <div className="col-md-8 col-md-offset-2"> <IconBar/> <SearchBar/> </div> </div> <div className="col-md-4"> <div className="row"> <div className="col-md-5"> <ul> </ul> </div> <div className="col-md-4"> <ul> </ul> </div> </div> </div> </div> ); } }); export default Footer;
  • one
    What do you want? What prevents you from simply taking your footer, and returning your markup with hung bootstrap classes in the render method? Or do you need some kind of interactivity from him? - Duck Learns to Take Cover
  • if I drop my class with my markup, then there will be no emptiness under any cases then? I just know from html that footer is the bottom of the page, nothing will be under it. But I don’t know how things are with the reactant components, so I decided to ask. maybe there is some element with a hard peg to the bottom, which in case of anything will not crawl away ... - Iga
  • one
    Oh. I understood everything, for you the bootstrap and the reaction is magic. So, this damn is not magic, this is the usual js and css. Footer is just a class with position: absolute and bottom: 0. The reaction will not touch anything if you do not fix the virtual dom with handles, but create it as a normal jsx element. The bootstrap scripts are not mixed up in creating the footer, only the styles. Connect the bootstrap css and hang the footer style on your element with the className. - Duck Learns to Take Cover
  • that is, you just need to add in the style as follows: var footerStyle = {color: 'white', backgroundColor: '# 4b4a45', position: 'absolute', bottom: 0} ;? - Iga
  • one
    Rather, something in the spirit of render: function () {return <div className = "footer"> </ div>}. In the bootstrap, there is already a class that makes the footer, you just need to competently create a reactor element with a class hanging on it. Hang inline styles via js - moveton. I highly recommend that you take the time to understand a little bit about the technology you are using. - Duck Learns to Take Cover

0