We Keep Coding

Why does clicking on a tab that changes state and has nothing to do with ajax call creates that ajax call?

I have a simple layout.
There is a <StateSelector> in <Navbar> clicking on that executes a method.
The value of innerHTML of that button in <StateSelector> is passed as an argument to a function that was passed to it as a prop. And the method present in parent changes the activeOption State to All, Offline and online depending on the button clicked.
Now, There is one more child to this parent called <TwitchList>. This <TwitchList>'s render method contains an array of 8 users names and 8 calls are made to twitch.tv to get data for those channels.
Note that I have not linked <StateSelector> just yet. It has no interaction to $.ajax(); in <TwitchList> except the fact that <TwitchList> and <StateSelector> belong to same parent.
Why does clicking on a element inside <StateSelector> generating ajax calls?
And clicking on it one time generates 8 calls which is equal to number of users in usersList[].
I have tried searching for this issue and I have tried to work my way around for about 4 days now and I just don't understand why it is happenning.
var Navbar = React.createClass({
render: function () {
return (
<div className="navbar">
<h1 className="header">TWITCH STREAMERS</h1>
<StateSelector changeActiveOption={this.props.changeActiveOption}/>
</div>
);
}
});
var StateSelector = React.createClass({
changeOption: function (e) {
this.props.changeActiveOption(e.target.innerHTML.toLowerCase());
},
render: function () {
return (
<div className="selectorList">
<div className="selector" onClick={this.changeOption}>ALL</div>
<div className="selector" onClick={this.changeOption}>ONLINE</div>
<div className="selector" onClick={this.changeOption}>OFFLINE</div>
</div>
);
}
});
var TwitchList = React.createClass({
render: function () {
var userslist = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var finalList = [];
function makeURL(user, type) {
return "https://api.twitch.tv/kraken/" + type + "/" + user;
}
userslist.forEach(function (user) {
$.ajax({
url: makeURL(user, "streams"),
dataType: 'jsonp',
success: function (data) {
function getID(data) {
if (data.stream) {
return data.stream._id;
} else {
return Math.random();
}
}
function getImage(data) {
if (!data.stream) {
return "https://dummyimage.com/50x50/ecf0e7/5c5457.jpg&text=0x3F";
}
else {
return data.stream.preview.medium;
}
}
console.log(data);
var id = getID(data);
var preview = getImage(data);
console.log(preview);
finalList.push(
<li className="twitchUser" key={id}>
<img src={preview} alt="preview"/>
</li>
)
},
fail: function (xhr, error, url) {
console.error(error + " " + xhr + " " + url);
}
});
});
return (
<div className= "twitchListWraper" >
<ul className="twitchList">
{finalList}
</ul>
</div>
)
}
});
var App = React.createClass({
getInitialState: function () {
return {
activeOption: "all"
};
},
changeActiveOption: function (option) {
this.setState({
activeOption: option
});
},
render: function () {
return (
<div className="app-root">
<Navbar changeActiveOption={this.changeActiveOption}/>
<TwitchList activeOption={this.state.activeOption}/>
</div>
);
}
});
ReactDOM.render(<App />, document.getElementById('root'));
JSBin: http://jsbin.com/sulihogegi/edit?html,css,js,console,output

Every time state changes on <App>, it re-renders. This includes re-rendering its children (on of which is <TwitchList>). Your ajax call is made in <TwitchList>'s render function, so every time state changes, it's going to be hitting that ajax code.
If you're wondering why the state's changing, it's because you have a function, changeActiveOption, that updates the <App>'s state being passed to <Navbar> which is then passes down to <StateSelector>.
The appropriate thing to do here is find a life cycle event in which to make the ajax call. I'd recommend componentWillMount and componentWillUpdate.
Take a look at lifecycle functions here.

you shouldn't write your ajax call to render function of TwitchList component instead you can write it to componentDidMount function

TypeError: undefined is not an object (evaluating 'this.props') when trying to use callback between child and parent in React.js

I'm currently having a problem when trying to send an action from a child element to its parent element. I want to change the state of the MessagingContainer when a thread is clicked to mark that thread as the active thread. So when the thread (ThreadElement) is clicked, it needs to send to its parent (ThreadList), which then sends to its parent (MessagingContainer) in order for the Messaging Container to update the state.
Firstly, is this the right approach, RE: state and modifying state?
Secondly, I can't seem to get this working. I'm getting a persistent error of TypeError: undefined is not an object (evaluating 'this.props').
I've omitted the messages part of the code below so only the threads is visible.
var ThreadElement = React.createClass({
render: function() {
console.log('ThreadElement');
console.log(this.props);
var threadParticipantsNames = this.props.thread.participants.map(function(participant) {
var participantName;
if (participant.user) {
participantName = participant.user.metadata.first_name;
} else {
participantName = 'Anonymous';
}
return (
<span key={participant.id}>
{participantName}
</span>
);
});
return (
<div key={this.props.thread.id} onClick={this.props.handleActiveThreadChange}>
{threadParticipantsNames}
</div>
);
}
});
var ThreadList = React.createClass({
render: function() {
console.log('ThreadList');
console.log(this.props);
var threadNodes = this.props.threads.map(function(thread) {
return (
<ThreadElement thread={thread} key={thread.id} handleActiveThreadChange={this.props.handleActiveThreadChange} />
);
});
return (
<div className="threadList">
{threadNodes}
</div>
);
}
});
var MessagingContainer = React.createClass({
handleActiveThreadChange: function() {
console.log('MessagingContainer handleActiveThreadChange called.');
},
getInitialState: function() {
return {
activeThread: 0,
data: threadsJSON
};
},
render: function() {
console.log('MessagingContainer');
console.log(this.props);
return (
<div>
<ThreadList threads={this.state.data.threads} handleActiveThreadChange={this.handleActiveThreadChange} />
<MessageList thread={this.state.data.threads[this.state.activeThread]} />
</div>
);
}
});
The console gives the below output, if that helps. The MessagingContainer and ThreadList console.log()s seem to work, so does this suggest the issue is in the ThreadElement class?
[Log] MessagingContainer
[Log] {}
[Log] ThreadList
[Log] {threads: Array, handleActiveThreadChange: function}
[Error] TypeError: undefined is not an object (evaluating 'this.props')
Thanks!

From what I can see, I think the problem is your .map function in the ThreadList component. Your context has changed for this since you're inside the map function. You should use .bind or a local that = this variable to save the right context:
var threadNodes = this.props.threads.map(function(thread) {
return (
<ThreadElement thread={thread} key={thread.id} handleActiveThreadChange={this.props.handleActiveThreadChange} />
);
}).bind(this);
or
var that = this;
var threadNodes = this.props.threads.map(function(thread) {
return (
<ThreadElement thread={thread} key={thread.id} handleActiveThreadChange={that.props.handleActiveThreadChange} />
);
});

How to get element from component

I Have some script, that takes element, but i cant find how to get it from react component. At least, i can get element after rendering, but now i have another problem - cant make event on button, coz i need SignatureObj
var SignaturePad = require('signature_pad');
var SignatureWidget = React.createClass({
_handleClear: function(e, SignatureObj) {
SignatureObj.clear();
},
_getSignature: function(canvas) {
return new SignaturePad(canvas);
},
componentDidMount: function() {
var wrapper = this.getDOMNode(),
canvas = wrapper.querySelector('canvas'),
SignatureObj = this._getSignature(canvas);
},
render: function() {
var canvas = React.createElement('canvas');
return (
<div>
{canvas}
<button>Clear</button>
</div>
);
}
});
Finally, i need to get something like this
render: function() {
var canvas = React.createElement('canvas'),
>> canvasEl = canvas.getElement(),<< magic
SignatureObj = this._getSignature(canvasEl);
return (
<div>
{canvas}
<button onClick={this._handleClear.bind(this, SignatureObj)}>Clear</button>
</div>
);
}

first some side notes, getDOMNode is deprecated, u should use findDOMNode, further u don't need to use create element within the render, because if you use the jsx syntax which u do it will be converted to the syntax u are using (createlement ..etc .. under the hood)
for your problem about selecting the element:
React.findDOMNode(this.refs.findMe)
<-- makes u find the node or as u call it :D (Magic)
render: function() {
return (
<div>
<canvas ref='findMe'></canvas> <------- magic
<button>Clear</button>
</div>
);
}
Hope this helps!
some good reads:
refs:
https://facebook.github.io/react/docs/more-about-refs.html
jsx:
https://facebook.github.io/react/docs/jsx-in-depth.html

i used this way to add event
componentDidMount: function() {
var pad = this.refs.pad.getDOMNode(),
saveButton = this.refs.save.getDOMNode(),
clearButton = this.refs.clear.getDOMNode(),
SignatureObj = this._getSignature(pad);
clearButton.onclick = this._handleClear.bind(this, SignatureObj);
saveButton.onclick = this._handleSave.bind(this, SignatureObj);
},

markedjs from React component - stopped capturing the headers

Strange problem with marked executed within my React component.
Has been working, but cannot see why it's stopped.
This is my React component
** #jsx React.DOM */
var React = require('react');
var marked = require('marked');
var Panel = require('react-bootstrap').Panel;
var Highlight = require('highlight.js');
var Markdown = React.createClass({
componentWillMount:function( ){
marked.setOptions({
highlight: function (code) {
return Highlight.highlightAuto(code).value;
},
sanitize: true
});
},
render: function () {
var rawMarkup;
if (_.isString(this.props.content)) {
rawMarkup = marked(this.props.content);
}
else if (_.isArray(this.props.content)) {
rawMarkup = marked(this.props.content.join("\n"));
}
return (
<div>
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
</div>
);
}
});
exports.Markdown = Markdown;
Tracing it through, the problem appear to lie here:
(this is extract of marked js)
// heading
if (cap = this.rules.heading.exec(src)) {
src = src.substring(cap[0].length);
this.tokens.push({
type: 'heading',
depth: cap[1].length,
text: cap[2]
});
continue;
}
Where this.rules.heading == /^ *(#{1,6}) +([^\n]+?) *#* *(?:\n+|$)/
and src == "#heading"
Nothing is found.
I have updated npm packages, but don't see how this would have stopped working?
Any ideas?

react container not being removed on re-render

I have a form that displays an error container if any errors are added to the state. There is a handleSubmit function that calls a validateForm function before sending through the ajax request.
getInitialState: function () {
return {
formErrors: []
};
},
render: function () {
var errors = this.state.formErrors.map(function(error) {
return (
<li>
{error}
</li>
);
});
var errorContainer = (
<ul>
{errors}
</ul>
);
In the return block of the render function, there is this line to display the error container:
{ this.state.formErrors.length == 0 ? '' : errorContainer }
Inside of the validateForm function, I have something like this:
this.setState({ formErrors: [] });
var name = this.refs.name.getDOMNode().value.trim();
if (!name) {
newErrors = this.state.formErrors;
newErrors.push('Please add a name');
this.setState({
formErrors: newErrors
});
}
This works in that it will add the errors to the formErrors key in the state, but if I then input the correct things, any "new" errors will be appended in the view to the li as opposed to painting a fresh error container with N-1 errors, as in that scenario I would have filled in the name field.
Here's a jsfiddle: http://jsfiddle.net/ke4bmqny/7/

Your parent form component controls the error state, when you pass this down to the error display child component the errors are props of that component. See Communicate Between Components.
Change this line to camel-case :P
<GroupFormErrorComponent formErrors={this.state.formErrors} />
And you had it almost right but your error display component doesn't and shouldn't need to copy the error into another state variable.
var GroupFormErrorComponent = React.createClass({
render: function () {
var errors = this.props.formErrors.map(function(error, index) {
return (
<li key={index}>
{error}
</li>
);
});
var errorContainer = (
<div>
<div>
Sorry but there are errors:
</div>
{errors}
</div>
);
return (
<div>
{ this.props.formErrors.length == 0 ? '' : errorContainer }
</div>
);
}
});
PS Just a little tip on the DOMReady stuff you added to js fiddle - you didn't need it, instead just put the <script> part below the html (below <div id='form'></div>) and it will be ready.
Updated fiddle: http://jsfiddle.net/dL0uj9oc/3/

As far as I can see there is no case where 'this.state.formErrors' is emptied. So I would change the lines to:
var newErrors = [];
if (!name) {
newErrors.push('Please add a name');
this.setState({
formErrors: newErrors
});
}
But it would be better if you shared a jsfiddle where people can reproduce the problem.
On a side note, may be you should get your name value from state, instead of reading from DOM (where you get the name input value).