I have a problem with the prop. Below is my code and I don't understand why when I'm rendering paragraph with {this.props.name}, it doesn't show the name from props. It may be a stupid question but I've just started my adventure with React so I need your help.
class CardGenerator extends React.Component{
render(){
return (
<div>
<Name/>
</div>
)
}
}
class Name extends React.Component{
render(){
return <p>{this.props.name}</p>
}
}
ReactDOM.render( <CardGenerator name='David'/>, document.getElementById('app'))
Because you are not passing the props to Name component. You are passing the prop name to CardGenerator component there it will be available by this.props.name. To access that inside Name component you need to pass the value to Name component again.
Use this:
class CardGenerator extends React.Component{
render(){
return (
<div>
<Name name={this.props.name}/>
</div>
)
}
}
class Name extends React.Component{
render(){
return <p>{this.props.name}</p>
}
}
ReactDOM.render( <CardGenerator name='David'/>, document.getElementById('app'))
Check the working example:
class CardGenerator extends React.Component{
render(){
return (
<div>
<Name name={this.props.name}/>
</div>
)
}
}
class Name extends React.Component{
render(){
return <p>{this.props.name}</p>
}
}
ReactDOM.render( <CardGenerator name='David'/>, 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'/>
You are passing the name to the CardGenerator component, but then the CardGenerator component is not passing the name to the Name component.
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 currently learning React and I do not understand when should I use these and when should I not? I have seen tutorials where people just use them seemingly interchangeably. Hence, I would like to know what is the differences between them and when should i or should i not use them.
For example, assuming the "function" named component returns a <div>Hello</div> after the call, I can have the following code.
import {function} from './component';
class X extends React.Component{
render(){
return(
<div>
<function Props1="Hello"/>
</div>
)
}
}
Next,I believe can also have the following code, please correct me if I'm wrong
import {function} from './component';
class X extends React.Component{
render(){
return(
<div>
{function("Hello")}
</div>
)
}
}
So it seems like there are two ways for doing the exact same thing in ReactJS? Are there any reasons I should be using one over the other?
When you render it like <function Props1="Hello"/>, React will create a props object, with the properties and values pairs you passed to it.
When you render it like {function("Hello") your props argument will be a string "Hello".
See snippet below:
function App() {
return(
<React.Fragment>
<Component1
props1="hello"
/>
{Component2("hello")}
</React.Fragment>
);
}
function Component1(props) {
return(
<React.Fragment>
Component1
<div>Props: {JSON.stringify(props)}</div>
<br/>
</React.Fragment>
);
}
function Component2(props) {
return(
<React.Fragment>
Component2
<div>Props: {JSON.stringify(props)}</div>
</React.Fragment>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
The difference is that first case it is stateful component, so the props has to be passed by something like in your case
Props1=""
then in your function component which in this case is stateful ,you get access to props via this.props.Props1
in second case it is functional component so you can get access to it like for example:
class X extends React.Component{
render(){
return(
<div>
{function("Hello")}
</div>
)
}
}
function function(myprop) {
return <div>{myprop}</div>
}
I have come across many sources which talk about how to do Component nesting. However, whenever I try to create a Component inside another Component my code fails.
class parent extends React.Component{
class child extends React.Component{
render(){
return <div><h1>Hiiii</h1></div>;
}
}
render(){
return <div><DEF /></div>;
}
}
You can't do that. You can do this on the same file (not same component)
class DEF extends Component {
render() {
return (
<div>
<h1>Hiiii</h1>
</div>
);
}
}
export default class ABC extends Component {
render() {
return (
<div>
<DEF />
</div>
);
}
}
You can't define class inside another class and I don't see why you would want to.
In React you can define Components in two ways: a stateful component (class) or a functional component (function). Stateful components should only be used when you need to manage state locally.
You can do something like:
export default class MyStatefulComponent extends Component() {
render() {
return (
<div><MyFunctionalComponent {...this.props} /></div>
)
}
}
function MyFunctionalComponent(props) {
return <h1>I am functional</h1>
}
I have used the spread operator to pass on the props from the stateful to the functional component, but you should probably pass the individual props as needed..
Comoponent nesting means rendering react components inside other components. Like
<ParentComponent property={value}>
<div>
<ChildComponent />
...
</div>
</ParentComponent>
This is how you can achieve what you are trying to do.
class ABC extends React.Component {
render() {
class DEF extends React.Component {
render() {
return (
<div>
<h1>Hiiii</h1>
</div>
);
}
}
return (
<div>
<DEF />
</div>
);
}
}
Yo can just define component as a static property of other component
class Test extends Component {
static SubTest=props=><div>SubTet</div>
render(){
return(
<div>Test component</div>
)
}
<Test />
<test.SubTest />
Is it possible to use ReactDOM.createPortal inside <React.Fragment> with another element that is rendered to where the component is rendered or am I doing something wrong here?
class Component extends React.Component{
render(){
return (
<React.Fragment>
ReactDOM.createPortal(<h1>Hello</h1>,
document.getElementById('side'))
<h1>Hello</h1>
</React.Fragment>
);
}
}
Yes it is entirely possible, you just need to wrap React.createPortal within {} like
class Component extends React.Component{
render(){
return (
<React.Fragment>
{ReactDOM.createPortal(<h1>Hello</h1>,
document.getElementById('side'))}
<h1>Hello</h1>
</React.Fragment>
);
}
}
Working codesandbox
Before marking it as an duplicate read the question completely.
I have two component, say A and B. A extends React.Component and B extends A. Calling super inside the constructor of B will make all the things available under this of A to be available under B also.
The issue I'm facing is, I've a method which will updated the state of A. I'm calling this method from B. This still updates the state of B not A. Is this expected or am I doing anything wrong.
Working example
class A extends React.Component{
constructor(props) {
super(props)
this.updatedState = this.updatedState.bind(this) //bound to this parent
this.state = {
text: 'Hello from the other side!'
}
}
updatedState(){
this.setState({
text: 'I must have called a thousand times!'
})
}
render(){
return <h1>{this.state.text}</h1>
}
}
class B extends A{
constructor(){
super()
}
render(){
return <div>
<h1>{this.state.text}</h1>
<button onClick={this.updatedState}>Update state</button>
</div>
}
}
ReactDOM.render(
<div>
<A/>
<B/>
</div>,
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>
Another Example
This is not using the constructor or the super. I instantiate A using new and call the methods. The method is being called but the render is not triggered.
class A extends React.Component{
constructor(props) {
super(props)
this.updatedState = this.updatedState.bind(this) //bound to this parent
this.state = {
text: 'Hello from the other side!'
}
}
updatedState(){
console.log('called')
this.setState({
text: 'I must have called a thousand times!'
})
}
render(){
return <h1>{this.state.text}</h1>
}
}
class B extends A{
render(){
var parent = new A()
return <div>
<h1>{this.state.text}</h1>
<button onClick={parent.updatedState}>Update state</button>
</div>
}
}
ReactDOM.render(
<div>
<A/>
<B/>
</div>,
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>
Your second example does not work as it supposed to.
class B extends A{
render(){
var parent = new A()
return <div>
<h1>{this.state.text}</h1>
<button onClick={parent.updatedState}>Update state</button>
</div>
}
}
In the above there is a B object which extends A.
Assuming that this instance of B references adress 0x001 in memory.
var parent =new A() creates an A object and it references another address in memory for example 0x002. This reference is kept in memory which is reserved for instance of object B extends A. that's it. they have just Has - a realationship. But B extends A (B is A ) so they have is-a relationship.
http://www.w3resource.com/java-tutorial/inheritance-composition-relationship.php
Extending B with A doesn't link any new instance of B with a new instance of A. Furthermore, try composition instead of inheritance. There is no specific use case in inheritance that composition doesn't cover. Composition is more natural, more easier to reason, behavior is more explicit and also a lot safer.
Here's how I would do it with composition. I don't know what exactly your use case is, so pardon me if the following refactored example doesn't fit in with what you're trying to accomplish. But nevertheless, you should be able to achieve the same with composition instead of having to use inheritance.
class A extends React.Component {
render () {
return <h1>{this.props.displayText}</h1>
}
}
class B extends React.Component {
state = {
displayText: 'Hello from the other side!'
}
updateState () {
let displayText = 'I must have called a thousand times!';
this.setState({
displayText: displayText
}, () => this.props.onUpdateClick(displayText));
}
render () {
return <div>
<h1>{this.state.displayText}</h1>
<button onClick={this.updateState.bind(this)}>Update state</button>
</div>
}
}
class C extends React.Component {
state = {
displayTextA: 'Hello from the other side!'
}
changeA (value) {
this.setState({
displayTextA: value
});
}
render () {
return (
<div>
<A displayText={this.state.displayTextA} />
<B onUpdateClick={this.changeA.bind(this)} />
</div>
)
}
}
ReactDOM.render(
<div>
<C/>
</div>,
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>
Here are a few posts that you might find helpful:-
Composition vs Inheritance
Mixins Are Dead. Long Live Composition