I have a React interview using codepen. I can't get my child elements to show up.
class Application extends React.Component {
render() {
return <div>
hello
<Jack />
</div>
}
}
class Jack extends React.Component {
render() {
return (
<div>
Goodbye
</div>
)
}
}
React.render(<Application />, document.getElementById('app'));
In this code, I only see Hello, not Goodbye. The "Jack" component is not being rendered. What can I do?
React.render(<Application />, document.getElementById('app'));
should be:
ReactDOM.render(<Application />, document.getElementById('app'));
Working example here.
Related
Can someone please explain to me the answer to this: like how are we embedding and whats ReactDOM.render() doing?
Question: How can you embed two or more components into one?
Answer: We can embed components into one in the following way:
class MyComponent extends React.Component{
render(){
return(
<div>
<h1>Hello</h1>
<Header/>
</div>
);
}
}
class Header extends React.Component{
render(){
return
<h1>Header Component</h1>
};
}
ReactDOM.render(
<MyComponent/>, document.getElementById('content')
);
If you don't want to have a div or any other component that surrounds your other components then you can make use of the short syntax and that goes as follow:
class MyComponent extends React.Component{
render(){
return(
<>
<h1>Header Component</h1>
<div>
<h1>Hello</h1>
</div
</>
);
}
}
ReactDOM.render(
<MyComponent/>, document.getElementById('content')
);
I am learning React
While working on Props, I have created a component and using that component in my index.jsx. But the values passed through props are not displayed on the UI.
usingprops.jsx
import React from 'react';
class UsingProps extends React.Component {
render() {
return (
<div>
<p>{this.props.headerProp}</p>
<p>{this.props.contentProp}</p>
</div>
);
}
}
export default UsingProps;
index.jsx
import React from 'react';
import UsingProps from './Props/UsingProps.jsx';
class App extends React.Component {
render() {
return (
<div>
<UsingProps />
</div>
);
}
}
const myElement = <App headerProp="Header from props!!!" contentProp="Content from props!!!" />;
ReactDOM.render(myElement, document.getElementById('root'));
export default App;
You are putting the headerProp on the App component, not the UsingProps component, which is where you are trying to access it. You need to revise it to this:
class App extends React.Component {
render() {
return (
<div>
<UsingProps headerProp="Header from props!!!" contentProp="Content from props!!!" />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
I am following tutorial from: https://www.youtube.com/watch?v=OzqR10jG1pg
Using Code Editor: https://stackblitz.com
Coding error reads:
Error in index.js (36:10)
'}' expected.
Error line reads:
render: function () {
How do I get this code to work?
Here is my Code:
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
class App extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
render() {
return (
<div>
<Hello name={this.state.name} />
<p>
Start editing to see some magic happen :)
</p>
</div>
);
}
}
render(<App />, document.getElementById('root'));
<div id="example"></div>
<script type="text/babel">
var Bacon = React.createClass({
render: function () {
return (<h3>This is a simple component!</h3>);
}
});
ReactDOM.render(<Bacon />, document.getElementById('example'));
</script>
It looks like you are putting HTML code into your javascript (index.js) file. You should have a separate HTML file for that.
I can see you are trying to render two different apps.
First, when you use ReactDOM.render(<Bacon />, document.getElementById('example')); you're telling React to render the component Bacon in the HTML element that has an ID attribute 'example'.
Then, with render(<App />, document.getElementById('root'));, React will look for an element that has an ID attribute 'root'.
So you should have both elements in your HTML file, like the snippet below.
// index.js
class App extends React.Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
render() {
return (
<div>
<div>{this.state.name}</div>
<p>
Start editing to see some magic happen :)
</p>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
<!-- index.html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="example"></div>
<div id="root"></div>
<script type="text/babel">
var Bacon = React.createClass({
render: function () {
return (<h3>This is a simple component!</h3>);
}
});
ReactDOM.render(<Bacon />, document.getElementById('example'));
</script>
I have a codepen. I need it to literally say "Hello world" with React. I can't get the code to render.
I have Babel set as the pre-compiler.
I have both React and ReactDOM linked.
Here is all of the HTML:
<div id="app"></div>
Here is all of the JS:
class App extends React.Component {
render() {
<div>
<p>Hello!</p>
</div>
}
}
ReactDOM.render(<App />, document.getElementById('app'));
I need to get this going for an interview in an hour or two. Just can't get it working here. Help!
You forgot to return the component in render:
render() {
return (
<div>
<p>Hello!</p>
</div>
);
}
You need to return the content from the render function to display.
class App extends React.Component {
render() {
return (
<div>
<p>Hello!</p>
</div>
}
}
So I have this code
<bar change={this.change.bind(this)} />
which is working properly but when I wrap bar:
<foo children={<bar change={this.change.bind(this)}/>} />
change function is not triggered anymore. Any thoughts about this?
change function is triggered. problem must be from something else. maybe a HOC is interrupting.
class App extends React.Component {
change(){
alert('this code is running in ' + this.constructor.name + ' component');
}
render() {
return <Foo children={<Bar change={this.change.bind(this)} />} />;
}
}
class Foo extends React.Component {
render() {
return <div>{this.props.children}</div>;
}
}
class Bar extends React.Component {
render() {
return <div onClick={this.props.change}>This is Bar component, click me to run change method!</div>;
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>