CODEWITHSUNDEEP
javascriptruby-on-railsreactjs
user3266824
user3266824

Reputation: 1263

react component rendering but not visible on page within rails app

I am putting a react-js-jsx component within a view of a rails application. When I do inspect element I see the component's html tags in the console but I do not see any visible trace of this component on the page. The html tags are below:

 <div id="notebook"><div data-reactid=".1">
   <ul class="dropdown-menu" id="friend-menu" data-reactid=".1.0">    
    <li data-reactid=".1.0.0"><a data-reactid=".1.0.0.0">where am I?</a></li><li data-reactid=".1.0.1"><a data-reactid=".1.0.1.0">who  am I?</a></li>
    <li data-reactid=".1.0.2"><a data-reactid=".1.0.2.0">where do I need to be?</a></li>
    <li data-reactid=".1.0.3"><a data-reactid=".1.0.3.0">what is the meaning of life?</a></li>
  </ul>
 </div>
</div>

I have tested on multiple browsers and I get the same results in that the html tags of the component are not visible.

The javascript component code is listed here:

var Session = React.createClass({

  // handleSubmitAccept: function(e) {
  //   e.preventDefault();
  //   this.props.onSubmitAccept();
  // },
  // handleSubmitDecline: function(e) {
  //   e.preventDefault();
  //   this.props.onSubmitDecline();
  // },
  render: function () {
    return (
        <li>
          <a>{this.props.answer.questionContent}</a>
        </li>
      )
  }

 });



var Sessions = React.createClass({


  getInitialState: function() {
    return {
      answers: [
        // {id:1, url:"", name:"test user", friendStatus: false},
        // {id:2, url:"", name:"test user 2", friendStatus: true}
      ]
    };
  },

  componentDidMount: function() {
    $.get(this.props.source, function(data) {
      this.setState({answers: data.currentUser.answers});
    }.bind(this));

  },

  render: function() {
    var self = this;

    return(
      <ul className="dropdown-menu" id="friend-menu">
        {this.state.answers.map(function (answer) {
          return <Session answer={answer} />
        })}
      </ul>
    );
  }
});


var NoteBook = React.createClass({

  render: function() {
    return (
      <div  >
        <Sessions source="/users/1/answers"/>
      </div>
    );
  }
});

React.render(<NoteBook />,  document.getElementById('notebook'));

The view in which the html tags are rendered (but not visible) is here:

<h1>Answers#show</h1>
<p>Find me in app/views/answers/show.html.erb</p>
<div id="notebook"></div>

The layouts/application.html.erb code is this:

<!DOCTYPE html>
<html>
<head>
  <title>GlobeTrotters</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>

  <!--
  <%= javascript_include_tag :defaults, "http://localhost:9292/faye.js" %>
   -->

  <%= csrf_meta_tags %>
</head>
<body>
  <script src="http://d3js.org/queue.v1.min.js"></script>
  <script src="http://d3js.org/topojson.v0.min.js"></script>
   <div class="container">

        <ul class="nav nav-tabs">
          <% if show_menu_policy? %>
            <li id="FriendBox" style="margin-top:12px"></li>
          <% end %>
        <!-- component -->

        <li><%= link_to "Globe Trotter's", welcome_index_path %></li>
        <li><%= link_to "About", welcome_about_path %></li>
        <%if current_user%>
          <li id="friend_request"><span class= "glyphicon glyphicon-user" style="margin-top:14px"> </span></li>
        <%end%>
         <%if current_user && current_user.role =="captain" && TeamRelationship.where(receiver_team_id: current_user.team_id ).first%>
               <li><%= link_to "Friend Requested!",team_relationships_path %></li>
         <%end%>
         <%if current_user  && IndividualRelationship.where(receiver_id: current_user.id ).first%>
               <li><%= link_to "Friend Requested!",individual_relationships_path %></li>
         <%end%>
        <div class="pull-right user-info">
           <% if current_user %>
              <%= image_tag(current_user.avatar.tiny.url) if current_user.avatar? %>
             Hello <%= current_user.email %>! <%= link_to "Sign out", destroy_user_session_path, method: :delete %>

           <% else %>
             <%= link_to "Sign In", new_user_session_path %> or
             <%= link_to "Sign Up", new_user_registration_path %>
           <% end %>
         </div>
      </ul>



      <%= yield %>
     </div>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

    <script src="/assets/components/friend_request_box.js"></script>
    <script src="/assets/components/notebook.js"></script>

</body>
</html>

Note that on the bottom of my layouts/application.html.erb there is a script tag that is <script src="/assets/components/friend_request_box.js"></script> This script tag is another react component that is actually visible on the page. I have no clue why one is visible but the other is invisible.

Upvotes: 1

Views: 4005

Answers (1)

user3266824
user3266824

Reputation: 1263

I had a left over bootstrap class className="dropdown-menu" in one of the components. Once I removed that it started rendering.

Upvotes: 2

Related Questions