I am new at react js. Currently getting trouble while trying to use a local image as default icon for a button. But getting no luck.
var NavigationBar = React.createClass({
render: function(){
return (
<aside style={{float:"left",background:"#9999FF", height:"200px"}} class="navclass">
<ul>
<li>Templates
<ul>
//<form onSubmit={this.handleSubmit}>
<button><Image source={require('./template1.png')} style={{width:"28px", height:"28px"}}></Image>Template1</button>
<button><Image source={require('./template2.png')} style={{width:"28px", height:"28px"}}></Image>Template2</button>
//</form>
</ul>
</li>
<li>Figures</li>
<li>Text</li>
<li>Background Color</li>
<ImageUpload/>
</ul>
</aside>
);
}
});
Sorry, what are you talking about, React or React-Native ?
<Image /> is definetly a react-native component, and as I see from syntax you have copied this piece of code from some react-native example or tutorial, and all other tags are html... Maybe you should better try to use simple <img src='...' />. It should work.
Related
I'm trying to "converting" my code from HTML to ReactJS. What I tried and I couldn't make it worked is this line of code:
<div className = "title-bar" data-responsive-toggle = "center_menu">
<button className = "menu-icon" type = "button" data-toggle></button>
<div className = "title-bar-title"></div>
</div>
When I'm pressing that hamburger icon, that list "Home, Extensii etc" should appear. In HTML I made it worked fine. ReactJS it's not taking my data-responsive-toggle center_menu id. How should look the code, what is the correct syntax?
P.S.: I'm new in React, I'm trying to learn it.
well I don't know about whether you want it to look normal all the way and just have that burger on smaller screens or it's a burger menu all along but generally speaking for what you have asked, you need conditional classes to actually toggle between display:block; and display:none; and you need to handle that with the click event, so basically:
<div className ="title-bar">
<button className = "menu-icon" type = "button" onClick={this.toggleMenu}></button>
<div className = "title-bar-title"></div>
</div>
<div className={`example-menu ${this.isclicked}?" collapsed-menu": " closed-menu" `}>
<ul class = "menu dropdown" data-dropdown-menu>
<li>Home
....
<li>Contact</li>
</ul>
</div>
and that's what this.toggleMenu does:
toggleMenu() {
this.setState(state => ({
isclicked: !state.isclicked
}));
}
needless to talk about those two classes collapsed-menu and closed-menu, they would be sth like these:
.collapsed-menu{
....
display:block;
}
.closed-menu{
...
display:none;
}
There are several tutorials available on how to do it, e.g. here: https://css-tricks.com/hamburger-menu-with-a-side-of-react-hooks-and-styled-components/
Also you could use npm libraries to achieve the expected results.
what about the css (media query), did you specify the min-width value for the display??
I need to use data-src attribute in < div > to show an image but in react this attribute for me is not working, is there any way to fix that?
<div
data-aos="fade-up"
data-aos-easing="ease-in-out"
data-aos-duration="600"
data-aos-once="true"
>
<a href="#">
<div data-src="../../contents/images/01.jpg">
<div>
//some text here
</div>
</div>
</a>
</div>
When I tested it in simple html it is working and no problem and image shows correctly, but in react it is not Ok...
Trying to have a modal come in from Materialize-css that i get from that npm but nothing is showing up. I am using React with React Router v4 as well
I currently have it set up in my nav bar and the search-bar changes with the #modal1 identifier but the modal doesn't pop up. I would really like to avoid hacky things like have a line or two of jQuery in componentDidMount just for this because if thats the only solution I'll just go back to bootstrap.
I'm trying it with the code straight from the Docs. Please help!
<div className='container'>
<div id="modalHere" className="modal">
<div className="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div className="modal-footer">
Agree
</div>
</div>
<nav>
<div className="nav-wrapper blue-grey lighten-2">
<Link to='/professionals' className="brand-logo right"><img src={pegasusIcon} alt='OurTelos logo' className="OurTelosNavbarLogo"/></Link>
<ul id="nav-mobile" className="left">
<li><Link to="/professionals/sessions">Sessions</Link></li>
<li><a className="waves-effect waves-light btn modal-trigger" href="#modalHere">Modal</a></li>
</ul>
</div>
</nav>
</div>
EDIT
I added the jquery in my index file for the modal in a script tag and my modal does pop up but not properly. Take a look. Also if I use the example with the Fixed-Footer things seem to come out and work just fine.....why
EDIT 2
Now I am having an issue that the same modals from a single exported react component will no longer show after the page has been changed by react router...
so I'm currently working on a project written in Flask which I added Bootstrap to. I have recently started adding some react components and I would like to have them look like the other bootstrapped components. Here is some of my code:
This is where I've included my bootstrap.js files and react.js file
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/build/react.js"></script>
<script src="/static/js/build/JSXTransformer.js"></script>
<script src="/static/js/react-bootstrap-bower/react-bootstrap.js"></script>
This html normally is rendered by bootstrap as wonderful little pager icons, but not in react:
return (
<div>
<nav>
<ul className="pagination pagination-lg">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
I understand I didn't put the full return, the return isn't the issue at hand, however, its the styling. I tried adding in a Pager element with the following
var Pager = ReactBootstrap.Pager;
...
//inside some html return
<Pager></Pager>
but I get the response first that ReactBootstrap is not defined. Yet I read that the ReactBootstrap global is created automatically when you include the js file. The other response is that Pager doesn't exist (obviously since ReactBootstrap was unable to return it).
So my question is, can I simply return html without the data-reactid info or somehow have it rendered by bootstrap without needing reactBootstrap? or do is there something I'm missing from my files to use reactBootstrap. Thanks in advance for the help!
I tried to reproduce it in a jsbin, but ReactBootstrap.Pager is a component, and it renders with the correct styles.
You're not loading things correctly.
I am a noobie at React and I am trying to make a Bootstrap dropdown. The html that I am attaching to is here:
<ul class="dropdown-menu" id="dropdown">
</ul>
And here is what I want to put in my render method to insert inside of my html:
render: function() {
return (
<li>Books</li>
<li>Podcasts</li>
<li>Tech I Like</li>
<li>About me</li>
<li>Add a Blog</li>
);
}
But of course I can only return one element. What is the right way of doing this in React? How could I add multiple <li>'s into a dropdown like this? I tried wrapping the whole thing in a <div>, but that messes up my css.
react bootstrap makes working with react & bootstrap a bit easier:
render: function(){
return (
<DropdownButton title="Dropdown">
<MenuItem href="#books">Books</MenuItem>
<MenuItem href="#podcasts">Podcasts</MenuItem>
<MenuItem href="#">Tech I Like</MenuItem>
<MenuItem href="#">About me</MenuItem>
<MenuItem href="#addBlog">Add a Blog</MenuItem>
</DropdownButton>
);
}
This looks about the same, but has event-handlers & adds all the right classes. As #sophie-alpert said, though, render must return a single DOM parent element.
Unfortunately this is one situation where React's ability to return only a single node from render is annoying. Your best bet is probably to return the <ul> itself from render:
render: function() {
return (
<ul className="dropdown-menu" id="dropdown">
<li>Books</li>
<li>Podcasts</li>
<li>Tech I Like</li>
<li>About me</li>
<li>Add a Blog</li>
</ul>
);
}
then render that entire component into another container like a <div>. In a future version of React we're hoping to remove this restriction so that something like your original code will work.
You can use react-select react component.It is very simple and easy to use.
var Select = require('react-select');
var options = [
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' }
];
function logChange(val) {
console.log("Selected: " + val);
}
<Select
name="form-field-name"
value="one"
options={options}
onChange={logChange}
/>
If you don't want to employ rebuilt dependencies like react bootstrap to work with both react and bootstrap, simply do the important js tricks which they do. In your case, basically a dropdown click event toggles the popper wrapper with .show css class. So you can define an onClick method and toggle the class inside it. For example in the following code I get the nextSibling and then toggle the class name for it with .show and finally inner div will be shown:
<div className="dropdown">
<a className="btn text-light" href="#" onClick={(e) => this.handleOption(e)}>open dropdown</a>
<div className="dropdown-menu dropdown-menu-left dropdown-menu-arrow">
<a className="dropdown-item" href="#">edit</a>
<a className="dropdown-item" href="#">delete</a>
</div>
</div>
Note that this tricks help you in case of few bootstrap functionalities in your project, otherwise employ rebuilt dependencies to have a clean and standard code.