I'm trying to use react-tabs here https://github.com/reactjs/react-tabs to create tabs on my UI. This is my code so far:
index.jsx:
import React from 'react';
import ReactDOM from 'react-dom';
import TabsApp from './TabsApp.jsx';
main();
function main() {
render(<TabsApp/>, document.getElementById('container'));
}
And this is my TabsApp.jsx:
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
class TabsApp extends Component {
handleSelect(index, last) {
console.log('Selected tab: ' + index + ', Last tab: ' + last);
}
render() {
return (
{}
<Tabs
onSelect={this.handleSelect}
selectedIndex={2}
>
{}
<TabList>
{}
<Tab>Foo</Tab>
<Tab>Bar</Tab>
<Tab>Baz</Tab>
</TabList>
{}
<TabPanel>
<h2>Hello from Foo</h2>
</TabPanel>
<TabPanel>
<h2>Hello from Bar</h2>
</TabPanel>
<TabPanel>
<h2>Hello from Baz</h2>
</TabPanel>
</Tabs>
);
}
}
But this is the error I'm getting:
ERROR in ./TabsApp.jsx
Module build failed: SyntaxError: C:/x/TabsApp.jsx: Unexpected token (14:8)
<Tabs
onSelect={this.handleSelect}
selectedIndex={2}
>
Can anyone please help me?
I'm using webpack dev server. And 0.14.7 react
Looks like your issue is in index.jsx. You are not using react to render the component. Your index.jsx should look like :
import React from 'react';
import ReactDOM from 'react-dom';
import TabsApp from './TabsApp.jsx';
ReactDOM.render(
<TabsApp />,
document.getElementById('container')
);
You've got
render() {
return (
{}
<Tabs
Get rid of that random {} there. You can't return an empty object AND a <Tabs> component.
erichardson30 is also correct... that's another problem.
Related
I'm building a React-Django application, and on my App component, I'm getting an issue on the final line with my render(<App />, appDiv).
Please can someone tell me what I'm doing wrong? I have the necessary modules imported, and this worked on my previous project. I am aware that Function-based components are better, but I'm more experienced with Class-based.
Error:
Code:
import React, { Component } from "react";
import { render } from "react-dom";
import HomePage from "./HomePage";
export default class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="center">
<HomePage />
</div>
);
}
}
const appDiv = document.getElementById("app");
render(<App />, appDiv);
Thanks,
DillonB07
TypeError expanded:
Try to replace:
import { render } from "react-dom";
with
import ReactDOM from "react-dom";
And use ReactDOM.render instead of just render
I'm using chakra-ui, along with react-split-pane.
If I use one or the other, it'll work well. If I use them together, the page is blank with no console error message. Here's three examples.
Using them together:
CodeSandbox: https://codesandbox.io/s/patient-worker-x65r5?file=/src/index.js
// Doesn't work, page is blank w/ no error message.
import React from "react";
import ReactDOM from "react-dom";
import { ChakraProvider } from "#chakra-ui/react"
import SplitPane from "react-split-pane";
export function Test() {
return(
<ChakraProvider>
<SplitPane split="vertical" minSize={200} defaultSize={200} maxSize={400}>
<div>123</div>
<div>456</div>
</SplitPane>
</ChakraProvider>
)
}
ReactDOM.render(
<Test />,
document.getElementById("root")
);
Using just react-split-pane:
// Works perfectly
export function Test() {
return(
<SplitPane split="vertical" minSize={200} defaultSize={200} maxSize={400}>
<div>123</div>
<div>456</div>
</SplitPane>
)
}
Using just chakra-ui:
// Works perfectly
export function Test() {
return(
<ChakraProvider>
<div>123</div>
<div>456</div>
</ChakraProvider>
)
}
Any ideas as to what could be happening here?
I'm using React+Typescript with webpack.
I want to use react-awesome-reveal in my typescript project but the animations doesnt seem to work. However, it works when I use react-reveal. Please advice on what I am missing.
import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import { Fade } from "react-awesome-reveal";
import ReactRevealFade from "react-reveal/Fade";
import "./style.css";
class App extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
render() {
return (
<div>
<Fade>
<Hello name={this.state.name} />
</Fade>
<ReactRevealFade left>
<Hello name={this.state.name} />
</ReactRevealFade>
<p>Start editing to see some magic happen :)</p>
</div>
);
}
}
render(<App />, document.getElementById("root"));
Stackblitz Code: Link
Any help is appreciated.
Can be fixed by wrapping the component inside a div.
When I import:
import {ReactComponent as Name} from '../assets/name.svg';
I get the error, but when I do:
import test from '../assets/name.svg';
The error goes away.
I've installed the react-polyfills and have imported them at the top of index.js:
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React, {Component} from 'react';
import Particle from '../Particle/particle';
import {ReactComponent as Name} from '../assets/name.svg';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
}
// componentDidMount() {
// console.log(this.state.points);
// }
render() {
return (
<React.Fragment>
<Particle />
<div className="name">
{/* <Name/> */}
</div>
</React.Fragment>
);
}
}
export default App;
It should be showing the svg Edge, but I get the error. When i uncomment the component, the page doesn't even load, but works in other browsers
I am trying to set up a basic example of react, this is my code to show the page
import React from "react";
import { render } from "react-dom";
class App extends React.Component {
render() {
return (
<div>
<h1>Hello!</h1>
</div>
)
}
}
render(<App/>, Window.document.getElementById('app'));
and am getting the error:
SyntaxError: Unterminated JSX contents (22:13)
render(< App/>, window.document.getElementById('app'));
No need to use window
Simply write
render(<App/>, document.getElementById('app'));