I tried to dynamically pass a reference to a class to a container and render it.
class Test extends React.Component{
render() {
return <div>Test</div>
}
}
class HelloWidget extends React.Component{
constructor(props) {
super(props);
this.state = {
child: Test
};
}
render() {
return <div>{this.state.child}</div>;
}
}
React.render(<HelloWidget />, document.getElementById('container'));
See it at jsfiddle: https://jsfiddle.net/coolshare/jwm6k66c/2720/
It did not render anything...
Any suggestion?
thanks
You can dynamically change the state value in HelloWidget component and that would reflect in Test Component.
Here is the code:
class Test extends React.Component{
render() {
return <div>{this.props.child}</div>
}
}
class HelloWidget extends React.Component{
constructor(props) {
super(props);
this.state = {
child: "Test"
};
}
render() {
return <div>
<Test child={this.state.child}/>
</div>;
}
}
React.render(<HelloWidget />, document.getElementById('container'));
Here is a working fiddle link: https://jsfiddle.net/jayesh24/1uvpg5ej/
You need to use React.createElement to create the new react element.
Like this:
render() {
return <div>hello {React.createElement(this.state.child)}</div>;
}
Check the working fiddle.
Use the Directive of your Test inside the constructor to create that component when you are assigning
this.state = {
child: <Test />
};
Related
so I'm having a little trouble using ref's with React.
All I'm trying to do is print the text content of an element using ref's like this:
export default class SomeClass extends Component {
constructor(props) {
super(props);
this.intro = React.createRef();
console.log(this.intro.textContent);
}
render() {
return (
<div ref={this.intro}>Hi</div>
)
}
}
However, this always prints null or undefined instead of "Hi" which is what I want.
You should use current with ref, like this.ref.current.textContent
Check the stackblitz demo Here
export default class App extends Component {
constructor(props) {
super(props);
this.intro = React.createRef();
}
componentDidMount(){
console.log( this.intro.current.textContent);
}
render() {
return (
<div ref={this.intro}>Hi</div>
)
}
}
Its because you are logging it in constructor. Run the code in componentDidMount lifecyle.
export default class SomeClass extends Component {
constructor(props) {
super(props);
this.intro = React.createRef();
}
componentDidMount(){
console.log(this.intro.textContent);
}
render() {
return (
<div ref={this.intro}>Hi</div>
)
}
}
You are console logging in the constructor before Dom is actually rendered.
Try console logging in an onClick handler instead.
export default class SomeClass extends Component {
constructor(props) {
super(props);
this.intro = React.createRef();
}
print = () => {
console.log(this.intro.textContent);
}
render() {
return (
<div>
<div ref={this.intro}>Hi</div>
<button onClick={this.print}>Print</div>
</div>
)
}
}
This is a simple React.js script, but couldn't find the cause. I think this issue is a common doubt for initial React developers. Please help.
The error showing is "this.props.parentClick is not a function".
class App extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
parentClick() {
}
render() {
return (
<div>
<Test childClick={this.parentClick}/>
</div>
);
}
}
class Test extends Component{
constructor(props){
super(props);
this.childClick = this.childClick.bind(this);
}
childClick(){
this.props.parentClick();
}
render() {
return (
<div>
<button onClick={()=>this.childClick()}>click</button>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Here is the code in stackblitz.com.
https://stackblitz.com/edit/react-3zt7qm
Your prop is called childClick not parentClick
Try with:
class App extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
parentClick() {
}
render() {
return (
<div>
<Test parentClick={this.parentClick}/> // Here the name of your prop should be parentClick
</div>
);
}
}
This function inside of your Test component:
childClick(){
this.props.parentClick();
}
should call this.props.childClick(), because thats the prop you passed into the Test component.
Say you have a parent component:
// ParentComponent
class ParentComponent extends React.Component {
render() {
return(
<ChildComponent/>
)
}
}
From inside the child component, is there a way to access the class name of the parent component without passing this down as props?
// ChildComponent
class ChildComponent extends React.Component {
// ?????
getParentComponentName() {
return this.??? // Should return "ParentComponent"
}
render() {
return(
<div/>
)
}
}
I'd prefer to be able to access this without passing it down as props. Thank you!
You need to access ReactInternalFiber like
class Child extends React.Component {
constructor(props) {
super(props);
this.state = { name: '' }
}
getParentName = () =>{
this.setState({ name: this._reactInternalFiber._debugOwner.type.name })
}
render() {
return (
<div>
<h1>Name: {this.state.name}</h1>
<button onClick={this.getParentName}>Get Parent Name</button>
</div>
)
}
}
File1.tsx
class abc extends <abcProps, abcstate>
{
constructor(){...}
}
class def extends abc {
constructor(){
super(props)
}
}
export default{
def_var: (props) => React.createElement(def, props)
}
File2.tsx
class xyz extends React.Component<xyzProps, xyzState> {
//I want to make def the child of this classi.e xyz
render(){
return
<div>
<def .../>
</div>
}
}
I have made a subclass child of another component, and the methods in parent class abc are not functioning properly.
The way your sample code is written, the constructor in component def doesn't accept any props -- so calling super(props) doesn't actually do anything.
Using vanilla JavaScript, here's an example doing exactly what you're asking for:
class Hello extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
class HelloExtension extends Hello {
constructor(props) {
super(props);
}
}
class XYZ extends React.Component {
render() {
return (
<div>
<h1>Inside XYZ Component</h1>
<HelloExtension name="World" />
</div>
)
}
}
ReactDOM.render(
<XYZ />,
document.getElementById('container')
);
The only difference in TypeScript is the strong typing of the props and state interfaces, which you already have in your example.
See a JS fiddle here.
I am trying to set state of the parent class with the child. But having trouble figuring out how to do this. I've abstracted away anything I deemed irrelevant to the question at hand. The issue is that I am
Class Parent extends Component {
constructor(props){
super(props)
this.state = {
foo: "bar"
}
}
coolMethod(n){
this.setState({foo: n})
}
render{
return(
<Child coolmethod={this.coolMethod} />
)
}
}
Class Child extends Component {
constructor(props){
super(props)
}
componentDidMount(){
let that = this;
videojs('my-player', options, function onPlayerReady() {
this.on('end',()=>{
that.props.coolMethod(<whatever string returns as a result of
this method>)
})
})
}
render{
return(
// irrelevant stuff to this question
)
}
}
Currently this code gives me "type error: this.setState is not a function"
If you want more info on videojs: http://videojs.com/ (though this is irrelevant to the question by itself, other than the fact that I reference it in my videojs call in componentDidMount of the child)
I assume the 2nd class is Class Child extends Component .... You need to bind this.coolMethod in your Parent constructor first.
Class Parent extends Component {
constructor(props){
super(props)
this.state = {
foo: "bar"
}
this.coolMethod = this.coolMethod.bind(this);
}
coolMethod(n){
this.setState({foo: n})
}
render{
return(
<Child coolmethod={this.coolMethod} />
)
}
}
Try this, tested working on my side, found two issues in the code
Javascript is case sensitive coolmethod is passed in to the Child, but you are trying to access coolMethod.
You need this > this.coolMethod = this.props.coolMethod.bind(this); in the constructor to inherit the setState function from the Parent, otherwise, this inside the coolMethod will be undefined.
import React, { Component } from 'react';
export default class Parent extends Component {
constructor(props){
super(props)
this.state = {
foo: "bar"
}
}
coolMethod(n){
this.setState({foo: n})
}
render(){
return(
<Child coolMethod={this.coolMethod} />
)
}
}
class Child extends Component {
constructor(props){
super(props)
this.coolMethod = this.props.coolMethod.bind(this);
}
render(){
return(
<button onClick={() => this.coolMethod("aabbcc")}>1</button>
)
}
}