How to let func run after Component A constructor in react. When I debugger blow codes, the func be to called first, then the A constructor, but in my case I want to the opposite, how can I do it?
function func() {
return 'aa'
}
class A extends Component {
constructor(props) {
super(props)
}
render() {
return <div>
{this.props.children}
</div>
}
}
class App extends Component {
render() {
return (
<A>
{func()}
</A>
)
}
}
You should do something like this:
class A extends Component {
constructor(props) {
super(props)
}
componentWillMount() {
this.func();
}
func() {
// this will run once when component A runs
}
render() {
return <div>
{this.props.children}
</div>
}
}
class App extends Component {
render() {
return (
<A></A>
)
}
}
This way, when component App runs, it will trigger the componentWillMount method in component A, which will call the func() function.
There are many solutions for this, but I would have done something like this:
function func() {
return 'aa'
}
class A extends Component {
constructor(props) {
super(props)
}
render() {
return( <div>
{typeof this.props.children === 'function' ? this.props.children() :
this.props.children}
</div>)
}
}
class App extends Component {
render() {
return (
<A>
{func}
</A>
)
}
Related
I know that this is probably the most asked question about React, but none of the answers helped me.
I have 2 classes:
Child
class Preview extends Component {
constructor(...args) {
super(...args);
this.state = {
isCommentOpen: false
};
this.handleComment = ::this.handleComment;
render() {
return(
button type="button" onClick={this.handleComment}>Comment</button>
)}
handleComment(){
this.setState({isCommentOpen: !this.state.isCommentOpen});
}
export default Preview;
Parent
class Profile extends Component {
render(){
return(
<div>
<_.Preview />
//the place where I want to add validation from the component above
{this.state.isCommentOpen ? <span>Cool</span> : null}
</div>
}
You should not mutate or directly assign this.props as shown in the other answer:
this.props.isCommentOpen = !this.props.isCommentOpen // <-- DON'T DO THIS! 🎃
Instead, you should have a callback function to let the Parent component update the child component:
class Profile extends Component {
constructor(props) {
super(props);
this.state = {
isCommentOpen: false;
}
this.handleComment = this.handleComment.bind(this); // <-- important!
}
handleComment() {
this.setState({ isCommentOpen: !this.state.isCommentOpen });
}
render() {
return (
<div>
<Preview handleComment={this.handleComment} />
{ this.state.isCommentOpen ? <span>Cool</span> : null }
</div>
)
}
}
export default Profile
The child component then only needs to call this.props.handleComment:
// Child Component:
class Preview extends Component {
render() {
return(
<button type="button" onClick={this.props.handleComment}>Comment</button>
}
}
export default Preview;
I need to wrap a React node into this function:
export const foo = (WrappedComponent: *) => {
class fooRenderer extends Component<any> {
render() {
const { bar, ...props } = this.props;
if (bar) {
...
}
return <WrappedComponent {...props} />;
}
}
return fooRenderer;
};
I tried the following:
class MyWrappedComponent extends React.Component {
render() {
...
return foo(
<MyComponent
a={a}
b={b}
</MyComponent>
);
}
}
and received the following error:
Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.
So essentially I need to render foo(Component_instance).
you can create your react component out of the function
class fooRenderer extends Component{
render(){
return(
<div>Component</div>
)
}
}
after that call the component in your function
export default function wrappedComponent(a, b){
return <fooRenderer a={a} b={b}/>
}
react component at the deep is function if you like to know
Very new to React, and coming from a jQuery background, the first thing I want to be able to do is toggle classes.
I understand how I can toggle a class within the same react component like this:
class ButtonParent extends React.Component {
constructor(props) {
super(props)
this.state = {
condition: false
}
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
this.setState({
condition: !this.state.condition
})
}
render() {
return (
<ButtonChild
className={ this.state.condition ? "button toggled" : "button" }
toggleClassName={ this.handleClick }
>
Click me if you dare!
</ButtonChild>
)
}
}
class ButtonChild extends React.Component {
render() {
return (
<div
className={ this.props.className }
onClick={ this.props.toggleClassName }
>
{ this.props.children }
</div>
)
}
}
ReactDOM.render(<ButtonParent />, document.getElementById('app'))
But what if I have a a separate component that I want to use in order to toggle the class of the component? Is there no easy way to do this in React?
Thanks!
Just create an ButtonChild.js file near your ButtonParent.js file and export your component
export default class ButtonChild extends React.Component {
render() {
return (
<div
className={ this.props.className }
onClick={ this.props.toggleClassName }
>
{ this.props.children }
</div>
)
}
}
Import it in you ButtonParent.js file like this
import ButtonChild from './ButtonParent.js'
Well here I want to use one method to another component, And for that I found a way through composition.
And this is what I did for that
file1.js
import ProductList from '../../views/Products/ProductList';
class CloseableTab extends Component {
constructor() {
super();
this.tpItem = () => {
console.log("hello, item clicked");
};
}
render() {
return (
<div>
<ProductList
itemChange={this.tpItem} />
</div>
);
}
}
export default CloseableTab;
Then in productList I want to call the "tpItem" method by calling itemChange in prop.
Though before that I tried to console the 'prop' of product list. So, it shows me null object in the console. And for that I used the code below:
ProductList.js
export default class ProductList extends Component {
constructor() {
super();
};
render() {
console.log(this.props);
return { }
}
}
So, this gives me null object in the console.
I'll appreciate your help, thanks.
Did you make constructor props enabled ?
Just pass props parameter in constructor
constructor(props) {
super(props)
}
The constructor for a React component is called before it is mounted.
When implementing the constructor for a React.Component subclass, you
should call super(props) before any other statement. Otherwise,
this.props will be undefined in the constructor, which can lead to
bugs.
Its not ideal to define functions in the constructor of the component, you can declare them outside of constructor and pass them down, also, in ProductList you are trying to render an object which isn't supported. if you don't want to return anything use return null.
Below code works as expected.
class CloseableTab extends Component {
constructor() {
super();
this.tpItem = () => {
console.log("hello, item clicked");
};
}
render() {
console.log(this.tpItem);
return (
<div>
<ProductList
itemChange={this.tpItem} />
</div>
);
}
}
class ProductList extends Component {
render() {
console.log(this.props);
return null
}
}
However you must write it like
class CloseableTab extends Component {
tpItem = () => {
console.log("hello, item clicked");
};
render() {
console.log(this.tpItem);
return (
<div>
<ProductList
itemChange={this.tpItem} />
</div>
);
}
}
Working sandbox
I have a button on my main component, when its clicked its open an "Approval pannel", And when the OK is clicked I am calling a callback function to the main component and doing some logic.
I want to pass the callback function(My reasons), The problem is that when the callback function is called, the props and state are undefined.
Why is that happening? Please tell me if any info is missing.
I have added a partial code here:
class MainComponent extends React.Component {
constructor(props){
currentActionConfig = {onOkClick: this.onGenericApprovalOkClicked, ...};
}
onCommandApprovalOkClicked(commandText){
console.log(this.props); <- 'undefined'
}
render(){
return <ActionsApprovalPanel currentActionConfig={this.currentActionConfig}/>
}
}
export default class ActionsApprovalPanel extends React.Component {
render()
{
...
return <ChangeIpApproval onOkClick={this.props.currentActionConfig.onOkClick}/>;
...
}
}
Try these changes
class MainComponent extends React.Component {
constructor(props){
super(props); //1. Call super
this.currentActionConfig = {onOkClick: this.onGenericApprovalOkClicked.bind(this), ...}; // 2.bind this
}
onCommandApprovalOkClicked(commandText){
console.log(this.props); <- 'undefined'
}
render(){
return <ActionsApprovalPanel currentActionConfig={this.currentActionConfig}/>
}
}
export default class ActionsApprovalPanel extends React.Component {
render()
{
...
return <ChangeIpApproval onOkClick={this.props.currentActionConfig.onOkClick}/>;
...
}
}
I think you need to make few changes to your React component.
First: In the constructor call super().
Second:: Define currentActionConfig as a state and try using it as this.state.currentActionConfig
Third: Specify the binding on onCommandApprovalOkClicked(). as
onCommandApprovalOkClicked = (commandText) => {} and similary for other functions.
class MainComponent extends React.Component {
constructor(props){
super(props);
this.state = {
currentActionConfig = {onOkClick: this.onGenericApprovalOkClicked, ...}
};
}
onCommandApprovalOkClicked(commandText){
console.log(this.props); <- 'undefined'
}
render(){
return <ActionsApprovalPanel currentActionConfig={this.state.currentActionConfig}/>
}
}
export default class ActionsApprovalPanel extends React.Component {
render()
{
...
return <ChangeIpApproval onOkClick={this.props.currentActionConfig.onOkClick}/>;
...
}
}
Make these changes and see if they work.