react,js component rendering partially

Question

Here is the full project, I have created a new project with minimal CSS and no CSS created by me. And the result is same.

Here is code of my Home class :

class Home extends React.Component{
state={};
render() {
    return (
        <div>
            <div className="container">

                <h1>Assignment Submission System</h1>
                <p className="lead">To get latest notification, click
                    <tab>
                        <Link to={"/notifications"}>
                            here
                        </Link>
                    </tab>
                    .
                </p>
                <p>All enrolled class-rooms, assignment to-do list are shown.</p>

                <h2 className="mt-4">Class-rooms:</h2>
                <ClassRoomUnit displayName={"class 1"} classID={"4324ax"} hLink={"/class/asd"}/>
                <ClassRoomUnit displayName={"class 2"} classID={"4324ax"} hLink={"/class/xzx"}/>
                <ClassRoomUnit displayName={"class 3"} classID={"4324ax"} hLink={"/class/asd"}/>
                <ClassRoomUnit displayName={"class 4"} classID={"4324ax"} hLink={"/class/asd"}/>
            </div>

        </div>
    );

}
}
export default Home;

But the problem is, when there is only very few ClassRoomUnit item, it renders correctly :

But when I add a lot more ClassRoomUnit, first portion and many item disappears, although the scrollbar remains :

How this can be solved ?

This is not an issue in react, rather in your css. Please check devtools. Inspect the elements if it is there in your dom. — Jojo Tutor
– Jojo Tutor, Commented Aug 31, 2019 at 7:13
And without the css nobody but you can answer this question. — HMR
– HMR, Commented Aug 31, 2019 at 7:21

Akber Iqbal · Accepted Answer · 2019-08-31 10:41:29Z

1

there must be some CSS, some class which is causing this for you. Can you fork my example stackblitz, make changes from your code to see if we can replicate the case here - it is much easier to help if we can all see the effects.

My index.js code:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class ClassRoomUnit extends React.Component {
  constructor(props) {
    super(props);
    this.state = { displayName: this.props.displayName, classID: this.props.classID, hLink: this.props.hLink }
  }
  render() {
    return (<div class='row'>
      <div class='col-4 themed-grid-col'>  {this.state.displayName} </div>
      <div class='col-4 themed-grid-col'>  {this.state.classID} </div>
      <div class='col-4 themed-grid-col'> <a href={this.state.hLink}>Go to class room</a> </div>
    </div>)
  }
}

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div>
        <div className="container">

          <h1>Assignment Submission System</h1>
          <p className="lead">To get latest notification, click here
              .
                </p>
          <p>All enrolled class-rooms, assignment to-do list are shown.</p>

          <h2 className="mt-4">Class-rooms:</h2>
          <ClassRoomUnit displayName={"class 1"} classID={"4324ax"} hLink={"/class/asd"} />
          <ClassRoomUnit displayName={"class 2"} classID={"4324ax"} hLink={"/class/xzx"} />
          <ClassRoomUnit displayName={"class 3"} classID={"4324ax"} hLink={"/class/asd"} />
          <ClassRoomUnit displayName={"class 4"} classID={"4324ax"} hLink={"/class/asd"} />

          <ClassRoomUnit displayName={"class 5"} classID={"4324ax"} hLink={"/class/asd"} />
          <ClassRoomUnit displayName={"class 6"} classID={"4324ax"} hLink={"/class/xzx"} />
          <ClassRoomUnit displayName={"class 7"} classID={"4324ax"} hLink={"/class/asd"} />
          <ClassRoomUnit displayName={"class 8"} classID={"4324ax"} hLink={"/class/asd"} />

          <ClassRoomUnit displayName={"class 9"} classID={"4324ax"} hLink={"/class/asd"} />
          <ClassRoomUnit displayName={"class 10"} classID={"4324ax"} hLink={"/class/xzx"} />
          <ClassRoomUnit displayName={"class 11"} classID={"4324ax"} hLink={"/class/asd"} />
          <ClassRoomUnit displayName={"class 12"} classID={"4324ax"} hLink={"/class/asd"} />

          <ClassRoomUnit displayName={"class 13"} classID={"4324ax"} hLink={"/class/asd"} />
          <ClassRoomUnit displayName={"class 14"} classID={"4324ax"} hLink={"/class/xzx"} />
          <ClassRoomUnit displayName={"class 15"} classID={"4324ax"} hLink={"/class/asd"} />
          <ClassRoomUnit displayName={"class 16"} classID={"4324ax"} hLink={"/class/asd"} />

        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

working stackblitz here

answered Aug 31, 2019 at 10:41

Akber Iqbal

15.1k12 gold badges54 silver badges77 bronze badges

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

4 Comments

Maifee Ul Asad Over a year ago

Doesn't work, can you see again please. I have updated my question.

Maifee Ul Asad Over a year ago

Well now it renders correctly in my firefox browser only. I don't know what's wrong...

Maifee Ul Asad Over a year ago

The inner browser of chrome, takes infinite time to render nothing(I waited for 2 hours). See here. If it is problem with browser, how this can be resolved ?

Maifee Ul Asad Over a year ago

Here is the full project, I have created a new project with minimal CSS and no CSS created by me. And the result is same. Can you please look.

Maifee Ul Asad · Accepted Answer · 2019-09-19 13:07:21Z

0

I saw this beautiful floating label example. And directly copy pasted the used .css file.

Maybe for these few lines :

html,
body {
   height: 100%;
}

It created all these problem, now I have moved all the rest css to another css file except this one, and my pages are rendering fully.

Till now, thanks to all those guys, who gave their valuable time on my question. It was really a headache for me, I had to change my templates. Which is really hard.

Thanks.

answered Sep 19, 2019 at 13:07

Maifee Ul Asad

4,68910 gold badges52 silver badges120 bronze badges

Collectives™ on Stack Overflow

react,js component rendering partially

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related