CODEWITHSUNDEEP
reactjs
pguardiario
pguardiario

Reputation: 54984

create-react-app sample app problems

I'm trying to create a sample create-react-app app:

create-react-app my-app
cd my-app/
npm start

Now it says to edit src/App.js, ok... I want to use react component fixed-data-table

Now, on that page is a "Basic Example" which gives lots of errors when I paste it into src/App.js - after some editing I get it down to:

import React from 'react';
import ReactDOM from 'react-dom';
import { Table, Column, Cell } from 'fixed-data-table';

// Table data as a list of array.
const rows = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b2', 'c2'],
  ['a3', 'b3', 'c3'],
  // .... and more
];

// Render your table
ReactDOM.render(
  <Table
    rowHeight={50}
    rowsCount={rows.length}
    width={5000}
    height={5000}
    headerHeight={50}>
    <Column
      header={<Cell>Col 1</Cell>}
      cell={<Cell>Column 1 static content</Cell>}
      width={2000}
    />    
  </Table>,
  document.getElementById('example')
);

which gives me the following error:

enter image description here

What am I doing wrong?

Upvotes: 1

Views: 97

Answers (1)

harshpatel991
harshpatel991

Reputation: 481

This is because you are trying to render React in an element that doesn't exist, change document.getElementById('example') to document.getElementById('root')

Update Your App.js file should use implement the render() function from the React component class:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { Table, Column, Cell } from 'fixed-data-table';

// Table data as a list of array.
const rows = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b2', 'c2'],
  ['a3', 'b3', 'c3'],
  // .... and more
];

// Render your table
class App extends Component {

  render () {
    return (<div>
    <div>Hello world</div>
    <Table
      rowHeight={50}
      rowsCount={rows.length}
      width={5000}
      height={5000}
      headerHeight={50}>
      <Column
        header={<Cell>Col 1</Cell>}
        cell={<Cell>Column 1 static content</Cell>}
        width={2000}
      />    
    </Table>

    </div>)
  }
}

export default App;

Then your index.js file just needs to render the App component

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

Upvotes: 1

Related Questions