My HTML renders my jsx file if nothing is being imported, but when I do import for example bootstrap or react, nothing gets rendered
var Hello = React.createClass ({
render() {
return (
<div>
<p>Hello World!</p>
<button>Test</button>
</div>
);
}
});
React.Render(<Hello />. document.getElementId("reactdiv")
This on its own works perfectly fine, but if I import say import React from "react"; it doesn't render anything
Related
I have a component that I am testing using jest and react native testing library
that looks something like this :
<FallbackErrorBoundary>
<Wrapper>
<Component1>
<Component2>
</Component2>
</Component1>
</Wrapper>
</FallbackErrorBoundary>
I want to get the whole rendered tree , I tried using
renderedComponent.container.children
But It only gets the direct children (FallbackErrorBoundary)
I tried using expect(renderedComponent).toMatchSnapshot()
but It's not very helpful
You can use prettyDOM or asFragment
E.g.
import React from 'react'
import { render, prettyDOM } from '#testing-library/react'
const HelloWorld = () => <h1>Hello World</h1>
const {container, } = render(<HelloWorld />)
const treeString = prettyDOM(container);
console.log(treeString)
// <div>
// <h1>Hello World</h1>
// </div>
expect(asFragment()).toMatchInlineSnapshot(`
<DocumentFragment>
<h1>
Hello World
</h1>
</DocumentFragment>
`);
If you don't want DocumentFragment element, you can use asFragment().firstChild.
My main page looks like this :
import React from "react";
import { Fragment } from "react";
import ModalA from "../components/Modal/ModalOptionA";
export default class AePage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Fragment>
<div className="grid-intro">
<div className="text-intro">
Some Text
</div>
<div className="modal-component-insert">
<ModalA show={true}/>
</div>
<div className="text-outro">
Some text
</div>
</div>
</Fragment>
)
}
}
And my component looks like this :
import React from "react";
import ReactDOM from "react-dom";
const Modal = ({ show, closed}) => {
return (
ReactDOM.createPortal(
<>
<div className="modal">
My Component
</div>
</>,
document.body
)
)
}
export default Modal;
The code above display something like :
Some Text
Some Text
My Component
Why does my component not display between the texts ? Is there a specific way for React to display this component between my divs ?
That is what ReactDOM.createPortal is for. It will always move things to the bottom of the DOM. That way, you can then position it above everything else using CSS.
It seems you don't really need that, so I'd just replace your code for the Modal component with:
import React from "react";
const Modal = ({ show, closed}) => {
return (
<div className="modal">
My Component
</div>
)
}
export default Modal;
I am just starting a new React project but I am having trouble importing a particular file, which is located in a seperate folder named 'Components', into my app.js file.
Please have a look below at the code I am using to import.
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import Category from './Components/Category.js';
import './App.css';
And here is the barely developed Category component, if its of any use in providing a sulution?
const Category=()=>{
return (
<div>
<div class="categories">
<div class="category-choice">
<h1>CAREER</h1>
</div>
<div class="category-choice">
<h1>FINANCE</h1>
</div>
</div>
</div>
)
}
export default Category;
And here is the error message react is providing me with
you need to import React everywhere where you are using JSX. it is important because all JSX elements get transpiled to React.createElement. so React must always be in scope.
import React from 'react' // add this line
const Category=()=>{
return (
<div>
<div class="categories">
<div class="category-choice">
<h1>CAREER</h1>
</div>
<div class="category-choice">
<h1>FINANCE</h1>
</div>
</div>
</div>
)
}
export default Category;
I have setup a basic react app using create-react-app and created my first component. However, the project is not able to build or render due to this error in browser window:
CountDown(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
./src/index.js
D:/ReactDev/CountDownReact/countdown/src/index.js:8
Here's my index.js file code:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Bulma from 'bulma/css/bulma.css'
import App from './components/App/App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
and the App.js where I have imported the new component:
import React, {Component} from 'react';
import './App.css';
import CountDown from '../countdown/Countdown';
class App extends Component {
render() {
return(
<div className="App">
Hello React
<CountDown/>
</div>
);
}
}
export default App;
Finally, my Countdown component code:
import React from 'react';
const CountDown = (props) => {
<section class="section">
<div className="hero-body">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently
reading
</h2>
</div>
</div>
</section>
};
export default CountDown;
Do I need to also import my new component here? How do I solve this issue. Thanks.
Your Countdown component doesn't return anything, you can replace the {} with () in order to have it return.
import React from 'react';
const CountDown = (props) => (
<section class="section">
<div className="hero-body">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently
reading
</h2>
</div>
</div>
</section>
);
export default CountDown;
That should do it.
CountDown component doesn't return the JSX. You can add an explicit return statement for returning the JSX.
Had the same problem with this:
function Input(props) {
return
<input type={props.type} placeholder={props.placeholder} />
}
Instead it had to be:
function Input(props) {
return <input type={props.type} placeholder={props.placeholder} />
}
My class is as follows:
import React from 'react';
import Input from 'react-bootstrap';
export default class FormWidget1 extends React.Component {
render() {
if (!this.props.fields) {
console.log('no fields passed');
}
else {
console.log(this.props.fields.length);
console.log(this.props.fields);
}
var formFieldList = this.props.fields.map(function(field) {
console.log("iterating");
return (
<Input type="text" placeholder="testing" label="label" />
);
});
return (
<div>
<form action="">
{formFieldList}
</form>
</div>
);
}
}
If I replace <Input /> with <input /> then there's no error.
The stacktrace only shows my app.jsx which is not useful.
What is wrong?
You need to de-structure your import of the Input jsx component.
import {Input} from 'react-bootstrap';
What this does is render to var Input = require('react-bootstrap').Input; Whereas what you previously had would render to var Input = require('react-bootstrap');
It does mention this in the documentation for React Bootstrap here:
https://react-bootstrap.github.io/getting-started.html#es6
Edit: A good hint is that the error you're getting from React is a typical error when you're trying to render as a component, something which is actually not a react component. So basically you were trying to render the object that react bootstrap returns containing all components, rather than the actual input component you wanted.