Problem: I'm working this tutorial to learn about React.js. I've added the showdown.js file to the project correctly and proved it is loaded as a script file in the client browser. When page loads and I look at the console it shows the error listed in the title.
Environment: MVC 4/5, Reactjs.NET
JSX File Looks Like This:
var Comment = React.createClass({
render: function() {
var converter = new Showdown.converter(); <-- Error is here
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{converter.makeHtml(this.props.children.toString())}
</div>
);
}
});
var CommentList = React.createClass({
render: function () {
return (
<div className="commentList">
<Comment author="Daniel Lo Nigro">Hello ReactJS.NET World!</Comment>
<Comment author="Pete Hunt">This is one comment</Comment>
<Comment author="Jordan Walke">This is *another* comment</Comment>
</div>
);
}
});
var CommentForm = React.createClass({
render: function () {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});
var CommentBox = React.createClass({
render: function () {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
Proof showdown.js file is sent to client Chrome Browser:
Proof the syntax is correct in JSX file
The line of code where exception is thrown is:
var converter = new Showdown.converter();
Question
How do I get a new instance of Showdown.convertor?
Jan's suggestion above was right. This is what fixed the issue:
<body>
<div id="content"></div>
<script src="https://fb.me/react-0.14.0.min.js"></script>
<script src="https://fb.me/react-dom-0.14.0.min.js"></script>
<script src="#Url.Content(" ~/Scripts/showdown.min.js ")"></script>
<script src="#Url.Content(" ~/Scripts/Tutorial.jsx ")"></script>
</body>
Note that showdown.js must come before the jsx file.
Related
So I have a simple component within a web app I have been working on and I was wondering if there is a way I could render an element within this component based on the value of this.props.item.
here is my JSX:
var React = require("react"); var actions = require("../actions/SchoolActions");
module.exports = React.createClass({
deleteSchool: function(e){
e.preventDefault();
actions.deleteSchool(this.props.info);
},
render:function(){
return(
<div className="panel panel-default">
<div className="panel-heading">
{this.props.info.name}
<span className="pull-right text-uppercase delete-button" onClick={this.deleteSchool}>×</span>
</div>
<div className="panel-body">{this.props.info.tagline}</div>
</div>
)
} })
I wanted to be able to do something like this:
render:function(){
return(
code blah blah...
if (this.props.info = "nothing"){
<div className="panel-body">{this.props.info.tagline}</div>
}
...code blah blah
But I cannot write javascript withing the render function itself. Does anyone know how I could do this? Any help or advice is appreciated, thank you in advance.
You can use conditionally render using if and return the appropriate jsx
render(){
if(something){
return(<MyJsx1/>)
}else{
return(<MyJsx2/>)
}
}
You can chaage your component to:
render:function(){
return(
<div className="panel panel-default">
<div className="panel-heading">
{this.props.info.name}
<span className="pull-right text-uppercase delete-button" onClick={this.deleteSchool}>×</span>
</div>
{this.props.info = "nothing"?
(<div className="panel-body">{this.props.info.tagline}</div>)
:null}
</div>
)
} })
https://facebook.github.io/react/docs/conditional-rendering.html
Single line example
{(this.state.hello) ? <div>Hello</div> : <div>Goodbye</div>}
or
{(this.state.hello) ? <div>Hello</div> : false}
I often create an explicit function to to this, to avoid clutter in the main render:
var ChildComponent = React.createClass({
render: function () {
return (<p>I am the child component</p>)
}
});
var RootComponent = React.createClass({
renderChild: function () {
if (this.props.showChild === 'true') {
return (<ChildComponent />);
}
return null;
},
render: function () {
return(
<div>
{ this.renderChild() }
<p>Hello World!</p>
</div>
)
}
});
http://reactkungfu.com/2016/11/dynamic-jsx-tags/
For many React developers using JSX it is not clear how to make a
dynamic JSX tag. Meaning that instead of hardcoding whether it is
input or textarea or div or span (or anything else) we would like to
keep it in a variable.
So I am learning react.js, and I am developing a quick search engine using the GitHub API of users.
The API side of the project works fine (I have tested by manually entering names into the area)
Its the search build in react that is not working.
(FYI: I am using Plunker which has react support)
script.jsx
var Card = React.createClass({
getInitialState: function(){
return{};
},
componentDidMount: function(){
var component = this;
$.get("https://api.github.com/users/" + this.props.login, function(data){
component.setState(data);
});
},
render: function(){
return(
<div>
<img src={this.state.avatar_url} width="100"/>
<h3>{this.state.name}</h3>
<hr/>
</div>
);
}
});
var Form = React.createClass({
handleSubmit: function(e){
e.preventDefault();
var loginInput = React.findDOMNode(this.refs.login);
this.props.addCard(loginInput.value);
loginInput.value = '';
},
render: function(){
return(
<form onSubmit={this.handleSubmit}>
<input placeholder="Enter Github Name" ref="login"/>
<button>Search</button>
</form>
);
}
});
var Main = React.createClass({
getInitialState: function(){
return {logins: []};
},
addCard: function(loginToAdd){
this.setState({logins: this.state.logins.concat(loginToAdd)});
},
render: function() {
var cards = this.state.logins.map(function(login){
return (<Card login={login} />);
});
return(
<div>
<Form addCard={this.addCard} />
{cards}
</div>
)
}
});
ReactDOM.render(<Main />, document.getElementById("root"));
The problem was (if you check console), that you had a duplicate script tag in the <head> which you didn't need. And also, you were doing React.findDOMNode instead of ReactDOM.findDOMNode
Line 25 of your JSX file:
var loginInput = ReactDOM.findDOMNode(this.refs.login);
That said, you don't need to do ReactDOM.findDOMNode. You can just use this.refs.login
I'm trying to test React out for myself. I got a simple "Hello World" message outputted successfully, so I tried taking this a step further and loop through data.
I'm getting a "waiting for roots to load…to reload the inspector” error, which after Googling tells me I have an issue with my syntax. I just can't find it... so your help is much appreciated!
var data = [
{perc:"2.2%", year:"5"},
{perc:"3.2%", year: "7"}
]
var Rates = React.createClass({
render: function(){
return (
<div>
<RateList data={this.props.rates} />
</div>
)
}
});
var Rate = React.createClass({
render: function(){
return (
<div>
<ul>
<li>{this.props.percent}</li>
</ul>
</div>
)
}
});
var RateList = React.createClass({
render: function(){
return (
<div>
<ul>
{ this.props.data.map(function(rate){
return <Rate percent={rate.perc} />
}) }
</ul>
</div>
)
}
});
ReactDOM.render(<Rates rates={data} />, document.getElementById("wow"));
It seems you could simplify a little.
var data = [
{perc:"2.2%", year:"5"},
{perc:"3.2%", year: "7"}
]
var RateList = React.createClass({
render: function(){
return (
<div>
<ul>
{ this.props.rates.map(function(rate){
return <li>{rate.perc}</li>
}) }
</ul>
</div>
)
}
});
ReactDOM.render(<RateList rates={data} />, document.getElementById("wow"));
I'm going through the react tutorial here -
http://facebook.github.io/react/docs/tutorial.html
And I'm having problems on step 11 "Fetching from the Server"
Here is my .js file -
var WGGroupList = React.createClass({
render: function() {
var wggroupNodes = this.state.data.map(function(wggroup) {
return (
<WGGroup name={wggroup.name} key={wggroup.id}>
{wggroup.description}
</WGGroup>
);
});
return (
<div className="wggroupList">
{wggroupNodes}
</div>
);
}
});
var WGGroupForm = React.createClass({
render: function() {
return (
<div className="wggroupForm">
Hello, world! I am a Widget Group Form.
</div>
);
}
});
var WGGroupBox = React.createClass({
getInitialState: function() {
return {data: []};
},
render: function() {
return (
<div className="wggroupBox">
<h1>Description</h1>
<WGGroupList data={this.state.data} />
// <WGGroupList data={this.props.data} />
<WGGroupForm />
</div>
);
}
});
var WGGroup = React.createClass({
render: function() {
return (
<div className="wggroups">
<h2 className="wggroupName">
{this.state.data.name}
</h2>
{this.state.data.children}
</div>
);
}
});
ReactDOM.render(
<WGGroupBox data="http://servername/api/wggroups/?format=json" />,
// <WGGroupBox data={data} />,
document.getElementById('content')
);
It works if I do the example previous with the data hardcoded -
var data = [
{id: 1, name: "Primary Widgets", description: "This is my Primary Widget group"},
{id: 2, name: "Secondary Widgets", description: "This is my secondary Widget group"}
];
The json served from the API is exactly the same format as above. So why, if using my URL do I get the following -
Uncaught TypeError: Cannot read property 'data' of null
It's failing on this line -
var wggroupNodes = this.state.data.map(function(wggroup) {
If I debug in my browser the datasource is not showing up so I'm guessing the issue is why is it not loading the url data?
I checked step 11 in the Tutorial and came across this sentence:
"Note: the code will not be working at this step."
At step 13 the function that fetches data from a server is introduced.. right now you are just passing a url-string around.
I have written code from the ReactJs site here while working through their comment box tutorial. Yet for some reason it is giving me an error about map:
Uncaught TypeError: this.props.data.map is not a function
Specifically it is complaining about line 7: var commentNodes = this.props.data.map(function (comment){ .. etc.. }
This error is particularly confusing since data is a list. Here is the full code displaying that:
var CommentList = React.createClass({
render: function(){
console.log(data)
var commentNodes = this.props.data.map(function (comment){
return (<Comment author={comment.author}>
{comment.text}
</Comment>);
});
return (<div className="commentList">
{commentNodes}
</div>);
}
});
var Comment = React.createClass({
render: function(){
return (<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div> );
}
});
var CommentForm = React.createClass({
render: function(){
return (<div className="commentForm">I am a comment form!</div>);
}
});
var CommentBox = React.createClass({
render: function() {
return (<div className="commentBox">
<CommentList data="{this.props.data}" />
<CommentForm />
</div>);
}
});
var data = [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is *another* comment"}
];
React.render(<CommentBox data={data} />, document.getElementById('content'));
This shouldn't be wrapped in a string data="{this.props.data}". Just remove the quotes and it should work.