I am trying to pass a property through react components and display the text property of that element I get know JSX sytax errors but I get Parsing error: Unterminated JSX contents.When attempting to display the text from the property but instead it's blank as if its not reading the property
Components.js
import React from "react"
function Components(props) {
return (<div>
<h1 style={style}>COMPONENT.js</h1>
<div>{props.text}</div>
</div>)
}
export default Components
App.js
import React from 'react';
import Component from "./component"
function App() {
return (
<div>
The Big World
<Component text="PROPERTY TEXT"/>
</div>
);
}
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
Expecting to see the property text to be pass through the Component property and displayed on the page
All looks clear. Try to add semicolon an the end of return statement:
function Components(props) {
return (
<div>
<h1 style={style}>COMPONENT.js</h1>
<div>{props.text}</div>
</div>
);
}
Ran all this in a codesandbox and other than style not being defined it all renders and runs fine. I also don't think it is an error with a typo in your posted code (the file is actually components.js and not component.js), because that shouldn't transpile at all since it can't find that file.
Related
I'm starting a small react project (beginner) and when I cut my 'App' component into many small components, such as 'header', it doesn't work. The error started to happen as soon as I cut my header. And to say that the header css doesn't load either. You can see in the element inspector that the React component is present, but it doesn't want to load the css associated with it.
// In App.js
import React from 'react';
import header_type from './header';
class App extends React.Component {
render() {
return (
<div className="window">
<div className="window-body">
<header_type/>
<div className='window_inner'>
<div className="column_left">
</div>
<div className="column_right">
</div>
</div>
</div>
</div>
)
}
}
export default App;
// In header.js
class header_type extends React.Component {
render() {
return (
<div className="window-header" >
</div>
)
}
}
export default header_type;
// In index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from '../src/components/App';
import '../src/style/window.css';
ReactDOM.render(
<App />, document.getElementById('root')
);
// error :
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
WARNING in src\components\App.js
Line 2:10: 'header_type' is defined but never used no-unused-vars
webpack compiled with 1 warning
Thank you in advance for the answers. Have a nice day.
one issue that is present in the above is code is you are exporting a default component from header.js, and importing it as named export in App.js.
In your App.js while importing header component import it as
import header_type from './header';
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
I'm trying to create a component who display source's code passed as props to write documentation of a library i work on with Docusaurus. Like html <code> or exactly like this (the blue part) :
https://mui.com/components/radio-buttons/
This is a simplified code
import React from 'react';
export default function Preview({title, description, component, code, rawComponent}) {
return (
<div>
<div><h1>{title}</h1></div>
<div>{description}</div>
<div>{component}</div>
<details>
<summary>Source</summary>
<pre>
<code>{code}</code>
</pre>
</details>
</div>
);
}
PROBLEM : i can't found how to pass code as props ....
<Preview
title={'Quick start'}
description={'Yes, this really is all you need to get started, as you can see in this live and interactive demo:'}
component={<HomepageFeatures />}
code={
`
import * as React from 'react';
import ReactDOM from 'react-dom';
import HomepageFeatures from 'newlib';
function App() {
return <HomepageFeatures />;
}
`}
/>
this also doesn't work
<Preview
title={'Quick start'}
description={'Yes, this really is all you need to get started, as you can see in this live and interactive demo:'}
component={<HomepageFeatures />}
code={
```
import * as React from 'react';
import ReactDOM from 'react-dom';
import HomepageFeatures from 'newlib';
function App() {
return <HomepageFeatures />;
}
```
}
/>
How to pass the code block ???
EDIT : a jsfildle https://jsfiddle.net/2pnc4htm/
it's work in pure reactJS, so it's Docusaurus who mess up ...
Thank you for reading
I believe the issue is that the curly braces are not required for the props. This only needs to be done for the in-line style of a component.
More information can be found here https://docusaurus.io/docs/next/markdown-features/react (in their examples they don’t use curly braces unless for the style)
I have two files in my folder which i use. Minside.js and footer.js.
When i import import Minside from "./component/Minside.js" to index.js it works as it should.
Now i want to import bottom.js to the MyApp.js as import bottom from "./component/footer.js". But the code editor wont find the keyword "bottom" like it does with "minSide". Those two files are in the exact same folder.
//Minside.js file
import React from "react";
import bottom from "./component/bottom.js"; // **This do not work**
function Minside() {
return (
<div>
<main>
<nav></nav>
</main>
<footer/>
</div>
)
}
export default Minside
// index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import Minside from "./component/Minside.js" // **This works. I can import the minside component to index.js**
ReactDOM.render(<Minside />, document.getElementById('root'));
//Bottom.js file
import React from "react";
import ReactDOM from 'react-dom';
function bottom() {
return (
)
<footer> <h1> This is my footer </h1>
}
export default bottom
Import from same location
import bottom from "./bottom.js";
You need to capitalize your 'Bottom' component.
'When an element type starts with a lowercase letter, it refers to a
built-in component like or and results in a string 'div'
or 'span' passed to React.createElement. Types that start with a
capital letter like compile to React.createElement(Foo) and
correspond to a component defined or imported in your JavaScript file.'
https://reactjs.org/docs/jsx-in-depth.html
I'm a newbie here so apologies for what might be a very elemental question.
I am trying to fiddle with different ways to import components in React by following a tutorial but I can't seem to make it work. There must be a simple tweak that I am sorely missing.
I am trying to create export a component (Person2) to another JS (App)
Person2.js
import React from 'react'
import ReactDOM from 'react-dom'
function Person2(){
return (
<div>
<h1>Millie</h1>
<p>PERSON 2</p>
</div>
);
}
/*
ReactDOM.render(
<div>
<h1>Hello World!</h1>
</div>,
document.getElementById('#p2')
);
*/
//ReactDOM.render(<Person2 />, document.getElementById('App'));
ReactDOM.render(<Person2 />, document.querySelector('#p2'));
App.js
import React from 'react';
import './css/App.css';
import './css/w3.css'
import Person from './Person'; // Import a component from another file using class with default export
import './Person2'; // Import a a component from another file using ReactDom.render
function App() {
return (
<div className="App">
<header className="App-header">
<p>this is the header</p>
</header>
<body>
<div class="w3-row">
<Person name="Max" age="28"/>
<Person name="Ann" age="18"/>
<div id = "p2"></div>
</div>
</body>
</div>
);
}
export default App;
Any idea where I went wrong?
I'm getting an error "Error: Target container is not a DOM element."
ReactDOM.render is usually used only for rendering your root component, I don't think you should use it in that case. With that said, the problem is the order the code is executed. You try to render your Person2 component in a node that hasn't been yet rendered, thus you get that error
Unless you have a very strange use case, you should be using export not ReactDOM.render for this example.
In Person2, change to this:
//ReactDOM.render(<Person2 />, document.querySelector('#p2'));
export default Person2;
Then to use it, in App change to this:
import Person2 from './Person2'; // for default export
...
<Person name="Ann" age="18"/>
//<div id = "p2"></div> *** remove this ***
<Person2 /> // Use like this
If for whatever reason your app requires the use of ReactDOM.render here, I'd add a check for safety to make sure the element exists first.
if (!!document.getElementById('p2')) {
ReactDOM.render(<Person2/>, document.getElementById('p2'));
}
I'm not sure if I'm explaining what I want right. Here's an example of what I'm trying to do:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class ExampleChild extends Component {
render() {
return (
<p>Hello!!</p>
);
}
}
class ExampleParent extends Component {
render() {
return (
<div>
<ExampleChild />
Here's the ExampleChild code:
{ExampleChild.toString()}
</div>
);
}
}
ReactDOM.render(<ExampleParent />, document.getElementById('root'));
An get the following output to the DOM, with all the correct indentations and spaces of the actual code:
Hello!!
Here's the ExampleChild code:
render() {
return (
< p >Hello!!< /p >
);
}
If the child component is just a stateless, functional component, I can do a .toString(), but it returns it in pure Javascript. It doesn't return it in the JSX format, or with the original returns, and indentations. I would also like to be able to do this with React class components as well. Is there maybe a library that does this?
You could use renderToStaticMarkup from react-dom/server, but only for the resulting HTML markup.
import React from "react";
import { render } from "react-dom";
import { renderToStaticMarkup } from "react-dom/server";
import Hello from "./Hello";
const App = () => (
<div>
<p>Component:</p>
<Hello name="CodeSandbox" />
<p>As HTML:</p>
<pre>{renderToStaticMarkup(<Hello name="CodeSandbox" />)}</pre>
</div>
);
render(<App />, document.getElementById("root"));
Check it out on CodeSandbox.
If you want the whole JSX file, you could import with something like raw-loader and print it inside pres as well.
I ended up using the react syntax highlighting library react-syntax-highlighter
I created an npm script to make copies of my react components and exported them as template literals. Which, then would be displayed via react-syntax-highlighter.
Working example: ryanpaixao.com
I didn't go with raw-loader because I didn't want to eject my create-react-app. (I would've had to in order to configure webpack) Also, it seems that I would've had to set all .js files to be imported as strings (maybe there's a way around that).