React JS event handler not responding - javascript

I'm a React JS newbe. I have a very simple code which uses an alert in a function that is supposed to be triggered by an onClick. However, the event does NOT get triggered in Chrome (or any other browser). What am I missing? I've googled, and played around with the code, but just can't seem to figure it out.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React - Template</title>
<script crossorigin src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var Comment = React.createClass({
edit: function () {
alert('Editing comment');
},
remove: function () {
console.log("Removing");
alert('Removing comment');
},
render: function () {
return (
<div className="commentContainer">
<div className="commentText">{this.props.children}</div>
<button onclick={this.edit} className="button-primary">Edit</button>
<button onclick={this.remove} className="button-danger">Remove</button>
</div>
);
}
});
ReactDOM.render(
<div className="board">
<Comment title="Blah">Blah</Comment>
</div>
, document.getElementById('container'));
</script>
</body>
</html>


It's onClick, not onclick. See https://facebook.github.io/react/docs/handling-events.html
React events are named using camelCase, rather than lowercase.

Related

How to run js function after popover content loads - after button click?

I have this kind of bootstrap popover from W3 schools site and edited code for my situation (see onPopoverHtmlLoad() function):
<!DOCTYPE html>
<!-- https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h -->
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
Toggle popover
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
//how to ensure to run this function on popoverHtmlDomLoad?
function onPopoverHtmlLoad(){
document.getElementById("inpopover_button").innerHTML = "true"
}
</script>
</body>
</html>
Question is, how can I change HTML data content of popover after I hit
popover button/trigger, please? Is there some function like
onHtmlDomPopoverLoad?
I appreciate solutions in Javascript, but accept JQuery help too. I was looking for similar issues but didn't find anything yet.

You can replace onPopoverHtmlLoad with:
function onPopoverHtmlLoad(){
$("#inpopover_button").text("true")
}
And attach the event handler with:
$('[data-toggle="popover"]').on('shown.bs.popover', onPopoverHtmlLoad)
See the codepen: https://codepen.io/anon/pen/MxXwQe

read about bootstrap popover events here :
https://getbootstrap.com/docs/4.0/components/popovers/#events
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})
<!DOCTYPE html>
<!-- https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h -->
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
Toggle popover
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover()
.on('shown.bs.popover', onPopoverHtmlLoad);
});
//how to ensure to run this function on popoverHtmlDomLoad?
function onPopoverHtmlLoad(){
document.getElementById("inpopover_button").innerHTML = "true"
}
</script>
</body>
</html>

How to use React v16 without a build process

In React v15 I can easily do the following:
<html>
<head>
<meta charset="UTF-8">
<title>React v15</title>
</head>
<body>
<div id="divContainer"></div>
<script src="https://unpkg.com/react#15.6.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.6.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.min.js"></script>
<script type="text/jsx">
var HelloWorld = React.createClass({
render: function() {
return <h2>Hello World !</h2>;
}
});
ReactDOM.render(<HelloWorld />
, document.getElementById('divContainer')
)
</script>
</body>
</html>
Once I reference react#16, react-dom#16 it no longer works, I understand that React.createClass() has been deprecated and removed. So what is its replacement?
I need a minimalist way of doing the same without a build process e.g. browserify, webpack, require, import, etc. I just want to reference libraries via a CDN or locally as I have shown in the example.

After you include React 16 libs you can access the React instance directly and extend React.Component
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>React Hello World</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/jsx">
class MyApp extends React.Component {
render() {
return <span>Hello world</span>;
}
}
ReactDOM.render(<MyApp />, document.getElementById('app'));
</script>
</body>
</html>

React document not rendering

My entire code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>React course</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Comment = React.createClass({
edit: function () {
alert('Editing comment');
},
remove: function () {
alert('Removing comment');
},
render: function() {
return (
<div className="commentContainer">
<div className="commentText">Text of whatever</div>
<button onClick={this.edit} class="btn-primary">Edit</button>
<button onClick={this.remove} class="btn-danger">Remove</button>
</div>
);
}
});
ReactDOM.render(
<div className="board">
<Comment>Heya</Comment>
</div>
,document.getElementById('container'));
</script>
</body>
When I refresh the page I see nothing. Then I inspect the element and I see the error that you see in the image but I do not really know what is going know since am new in react.
Hope you can help

I think it because you don't have an html element with an id of container. This section must reference a valid HTML element. document.getElementById('container'));
Try changing the id of example to container.

Why won't my picture appear in ReactJS?

I'm starting out with ReactJS & I want this simple image to appear on my practice web app but it isn't appearing. I thought my logic was correct but I guess not.
Here's my index.html file:
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
</head>
<body>
<div id="firstBar"></div>
<div id="body"></div>
<script type="text/babel" src="index.js"></script>
<script type="text/babel" src="body.js"></script>
</body>
</html>
Here's my body.js file:
import myPic from 'pictures/myPic.JPG' // myPic.JPG is in my pictures folder.
var Body = React.createClass({
render: function() {
return(
<img src={myPic}></img>
);
}
});
ReactDOM.render(<Body />, document.getElementById('body'));
Error I'm getting is:
`Uncaught ReferenceError: require is not defined
at eval (eval at transform.run (browser.js:4613), <anonymous>:6:25)
at Function.transform.run (browser.js:4613)
at exec (browser.js:4649)
at browser.js:4661
at XMLHttpRequest.xhr.onreadystatechange (browser.js:4632)`

require/import might not be supported in the browser
Try this:
var Body = React.createClass({
render: function() {
return(
<img src={"./pictures/myPic.JPG"}></img>
);
}
});
ReactDOM.render(<Body />, document.getElementById('body'));

React.renderComponent is not a function

I have read some articles for beginners about ReactJs. The article I read showed only code fragments. I'm having trouble with my first component:
full code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
<meta charset="UTF-8">
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function () {
return React.DOM.h1("hello world!!");
}
});
React.renderComponent(
HelloWorld,
document.getElementById("content")
);
</script>
</body>
</html>
When I open the page I see embedded:11 Uncaught TypeError: React.renderComponent is not a function
Can anyone please point me in the right direction?
I've also tried this with no luck:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>-->
<meta charset="UTF-8">
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
</script>
</body>
</html>

The problem with your first example is that React.renderComponent is not a function, you need to use ReactDOM.render instead. You should save yourself a lot of effort now and just use create-react-app and use this application. It takes all of the pain out of the tooling that you will need to make React fast to use (webpack hot module reloading). It is extremely simple compared to the average tooling you will need to setup taking any other route and is made by the people that make React. I can tell by the version number of React that you are using, the tutorial you are going of of is very old, a very longtime before Facebook released create-react-app when things were more difficult.
If you are going to go about it inline, use this in your head -
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" integrity="sha256-M5lc1yUhpXlm2VZjGk4aoFwqR9H1OJ0p5MR5xpipulk=" crossorigin="anonymous"></script>
Full working example on React 15 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" integrity="sha256-M5lc1yUhpXlm2VZjGk4aoFwqR9H1OJ0p5MR5xpipulk=" crossorigin="anonymous"></script>
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script>
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
</script>
</body>
</html>

EDIT: I see that you use babel-core browser.js, which has been deprecated, remove it and use React directly.
Remove script type and replace everything with:
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
jsbin demo

Categories