React: Reference error

Question

Could anybody help me please with the following problem? All code worked OK but not rendering the list of news. Get an error: my_news is not defined. Code below: In App component, my_news is not defined.

// INDEX.JS

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

    var my_news = [
{
    'author': 'IT News',
    'text': 'THE WEEK IN APPLE NEWS: IPHONE 8 RUMORS, MARCH IPAD EVENTS RUMORS, APPLE PARK OPENING IN APRIL, AND MORE',
    'bigText': 'There are rumors of an iPad event next month, and we’re seeing more speculation about the next iPhone as the year progresses. But besides anything i-related, there are plenty of Apple-related headlines in this week’s roundup. Check them out in this slideshow. Just click on the link to get more information.'
}];

ReactDOM.render(
  <App my_news = {my_news} />,
  document.getElementById('root')
);

// APP.JS

    var Add = React.createClass({  
  getInitialState: function() {
    return {
      agreeNotChecked: true,
      authorIsEmpty: true,
      textIsEmpty: true
    };
  },
  componentDidMount: function() {
    ReactDOM.findDOMNode(this.refs.author).focus();
  },

  onBtnClickHandler: function(e) {
    e.preventDefault();
    var textEl = ReactDOM.findDOMNode(this.refs.text);
    var author = ReactDOM.findDOMNode(this.refs.author).value;
    var text = textEl.value;

    var item = [{
      author: author,
      text: text,
      bigText: '...'
    }];

    window.ee.emit('News.add', item);
    textEl.value = '';
    this.setState({textIsEmpty: true});
  },

  onCheckRuleClick: function(e) {
   this.setState({agreeNotChecked: !this.state.agreeNotChecked});
 },

 onAuthorChange : function(e){
  if(e.target.value.trim().length > 0){
    this.setState({authorIsEmpty:false})
  }else{
    this.setState({authorIsEmpty:true})
  }
},

onTextChange : function(e){
  if(e.target.value.trim().length>0){
    this.setState({textIsEmpty:false})
  }else{
    this.setState({textIsEmpty:true})
  }
},

render: function(){
  var agreeNotChecked = this.state.agreeNotChecked,
  authorIsEmpty = this.state.authorIsEmpty,
  textIsEmpty = this.state.textIsEmpty;

  return( 
  <form className = 'add cf'>
  <input
  type='text'
  className='add__author'
  onChange={this.onAuthorChange}
  defaultValue=''
  placeholder='Your Name'
  ref='author'
  />
  <textarea 
  className='add__text' 
  onChange={this.onTextChange}
  defaultValue='' 
  placeholder='Add News text' 
  ref='text'>
  </textarea>
  <label className='add__checkrule'>
  <input type='checkbox' defaultChecked={false} ref='checkrule' onChange={this.onCheckRuleClick} />I agree 
  </label>
  <button 
  className='add__btn' 
  onClick={this.onBtnClickHandler} 
  disabled={agreeNotChecked || authorIsEmpty || textIsEmpty}
  ref='alert_button' >
  Add News
  </button> 
  </form>
  );
}
});

var App = React.createClass({
  getInitialState: function(){
    return{
      news: my_news {/*not defined*/}
    };
  },

componentDidMount: function(){
    var self = this;
    window.ee.addListener('News.add', function(item){
      var nextNews = item.concat(self.state.news);
      self.setState({news: nextNews});
    });
  },

  componentWillUnmount: function() {
    window.ee.removeListener('News.add');
  },

  render: function() {
    return (
    <div className="app">
  <Add /> 
  <h3>News</h3>                         
<News data = {this.state.news} /> 
</div>

);
}
});

export default App;

Mayank Shukla · Accepted Answer · 2017-03-28 17:39:00Z

1

Issue is, in this line:

getInitialState: function(){
    return{
      news: my_news //here
    };
},

You are passing my_news in props, so to access the my_news value, you need to write this.props.my_news, Use this:

getInitialState: function(){
    return{
       news: this.props.my_news
    };
},

answered Mar 28, 2017 at 17:39

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React: Reference error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related