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.
Related
I am rending two simple joke cards in TypeScript and the cards do show up in my browser but I also get this error:
'Jokes' cannot be used as a JSX component.
Its return type 'Element[]' is not a valid JSX element.
Type 'Element[]' is missing the following properties from type 'ReactElement<any, any>': type, props, key
I am new to TypeScript and cannot figure out for the life of me what the problem is. I have tried adding <></> between the <Jokes /> in my App.tsx file but that doesn't work. I can't figure it out and was hoping someone could guide me in fixing this.
Jokes.tsx
import { jokeList, JokesPunchlines } from './jokeList';
import './App.css';
function Jokes() {
return (
jokeList.map((joking: JokesPunchlines) => {
return (
<div className="box">
<strong>{joking.setup}</strong>
<br />
<p>{joking.punchline}</p>
</div>
);
})
);
}
export default Jokes;
Joke List
export interface JokesPunchlines {
id: number,
setup: string,
punchline: string,
}
export const jokeList: JokesPunchlines[] = [
{
id: 1,
setup: "What's the best thing about a Boolean?",
punchline: "Even if you're wrong, you're only off by a bit"
},
{
id: 2,
setup: "Why do programmers wear glasses?",
punchline: "Because they need to C#"
}
];
App.tsx
import './App.css';
import Jokes from './Jokes';
function App() {
return (
<Jokes />
);
}
export default App;
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
I have tried adding <></> between the <Jokes /> in my App.tsx file but that doesn't work. I can't figure it out and was hoping someone could guide me in fixing this.
Just as the error says, an array of React components isn't a React component itself. While it'll still work in the JavaScript, TypeScript doesn't like it. You can rectify it by adding a JSX fragment around the returned array, and interpolate the array into the fragment. You can also leave off the : JokesPunchlines since jokeList is typed properly (and maybe call the mapping argument, a joke object, joke or jokeObj or something - joking isn't a great variable name).
function Jokes() {
return (
<>
{
jokeList.map((joke) => {
return (
<div className="box">
<strong>{joke.setup}</strong>
<br />
<p>{joke.punchline}</p>
</div>
);
})
}
</>
);
}
By using implicite return typescript has some difficultie.
You can type function Jokes with return type. Its will help.
also this should do the job.
import { jokeList, JokesPunchlines } from './jokeList';
import './App.css';
function Jokes() {
return <>{
jokeList.map((joking: JokesPunchlines) => {
return (
<div className="box">
<strong>{joking.setup}</strong>
<br />
<p>{joking.punchline}</p>
</div>
);
})
}</>;
}
export default Jokes;
I'm currently learning react. At this point I'm trying to render multiple child components within the parent compnent by calling the map method on the data object array that is passed to the parent.
My code looks like this:
index.tsx:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {MOCK_CONTENTS} from "./DataDomain/Mocks/MockContents";
import SwipeView from "./components/SwipeView";
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<SwipeView contents={MOCK_CONTENTS}/>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more:
reportWebVitals();
SwipeView.tsx
import {Content} from "../DataDomain/Entities/Content";
import ContentCard from "./ContentCard";
interface SwipeViewProps {
contents: Content[];
}
function SwipeView({ contents }: SwipeViewProps): JSX.Element {
return <> {contents.map( content => {
ContentCard({content});
})} </>
}
export default SwipeView;
ContentCard.tsx
import React from "react";
import {Content} from "../DataDomain/Entities/Content";
interface ContentCardProps {
content: Content;
}
function ContentCard({ content }: ContentCardProps): JSX.Element {
return (
<>
<h1>{ content.title }</h1>
</>
);
}
export default ContentCard;
Where MOCK_CONTENTS is a array of the data objects.
The problem is that I'm just getting a white page and no error whatsoever.
this is the correct way.
SwipeView.tsx
import {Content} from "../DataDomain/Entities/Content";
import ContentCard from "./ContentCard";
interface SwipeViewProps {
contents: Content[];
}
function SwipeView({ contents }: SwipeViewProps): JSX.Element {
return <> {contents.map( (content,index) => <ContentCard key={index} content={content} /> )} </>
}
export default SwipeView;
note: it's better to use a specific id for the key instead of an index.
You're missing a return statement in your SwipeView.tsx component.
function SwipeView({ contents }: SwipeViewProps): JSX.Element {
return <>{contents.map((content, index) => {
<ContentCard key={index} content={content} />; // Missing return here
})} </>
}
With braces, you have to explicitly return your JSX. You can implicitly return JSX by instead wrapping your JSX in a parenthesis instead of braces.
For example:
function SwipeView({ contents }: SwipeViewProps): JSX.Element {
return <>{contents.map((content, index) => <ContentCard key={index} content={content} />)}</>;
}
In React, it is also vital that you always have a key prop when returning JSX within a loop so React is able to easily detect which component has been updated during it's reconciliation re-render process. Note the addition of key in each example.
i'm trying to render a useHook statement in React that just display the length of the array and nothing getting render.
Here is APP.js
import React, { useState } from 'react'
import TodoList from './TodoList'
function App() {
const [todos, setTodos] = useState(['test1', 'test2'])
return (
<>
<TodoList todos={todos} />
<input type="text" />
<button>Add Todo</button>
<button>Clear Completed Todos</button>
<div>0 left to do</div>
</>
)
}
export default App;
Here TodoList.js
import React from 'react'
export default function TodoList(todos) {
return (
<div>
{todos.length}
</div>
)
}
Here index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Screenshot of what getting render
screenshot
Change the TodoList Component to this,
import React from 'react'
export default function TodoList({todos}) {
return
<div>
{todos.length}
</div>
)
or
import React from 'react'
export default function TodoList(props) {
return (
<div>
{props.todos.length}
</div>
)
Just remember you receive props in the form of an object, so you can either de-structure it or use dot notation or bracket notation to access the peops you pass to a component
I can't import my module, it keeps giving me the same error, I have looked into what I may have done wrong but I dont see it. Everything works for my other components (They are all in the same folder "./[Folder]") except this component and it's being passed the exact same way.
Module Not Found
ManageTreeComponent.jsx
import React from "./react";
function DisplayListItems(){
return(
<h1>Hello</h1>
);
}
export default DisplayListItems;
LoginApp.jsx
import DisplayListItems from "./ManageTreeComponent.jsx";
function Login() {
return <div className="container">
<DisplayListItems />
</div>
}
export default Login;
index.js
import Login from "./components/Login/LoginApp";
ReactDOM.render(<div>
<Login />
</div>, document.getElementById("root"));
Your import react statement is wrong in ManageTreeComponent.jsx, make sure your import looks like this:
import React from "react"; // without period and /
Rather then using .jsx file use .js file
ManageTreeComponent.js
import React from "react"; // need to import like this
function DisplayListItems(){
return(
<h1>Hello</h1>
);
}
export default DisplayListItems
LoginApp.js
import DisplayListItems from "./ManageTreeComponent";
function Login() {
return (
<div className="container">
<DisplayListItems />
</div>
);
}
export default Login;
index.js
import Login from "./components/Login/LoginApp";
ReactDOM.render(<div>
<Login />
</div>, document.getElementById("root"));
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.