So I’m just trying out different ways how I can render my components, but for some error gives me ‘TextareaInput is not defined’ for ```
import React,{ Component } from 'react';
class TextFormEntry extends Component {
constructor(props) {
super(props);
}
TextareaInput() {
return (
<textarea className='textarea-input' rows="10" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>
);
};
render() {
<div>
<TextareaInput />
</div>
}
}
export default TextFormEntry;
This method works but why not the former:
render() {
return (
<textarea className='textarea-input' rows="10" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>
);
TextareaInput() { this is a function which returns your textarea … but this <TextareaInput /> probably is doing nothing as you need to call textareaInput like … textareaInput() … but even doing that it shouldnt work
you could do below inside the render before the return …
render () {
let TextareaInput = (<textarea className='textarea-input' rows="10" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>)
return (
{TextareaInput}
)
}
However, I wouldn’t recommend this approach because It kinda defeats the purpose of Reacts component composition. If you wanted TextareaInput as a component, you’d be better off creating a separate function/class:
function TextAreaInput() {
return (
<textarea className="textarea-input" rows="10" cols="50">
At w3schools.com you will learn how to make a website. We offer free
tutorials in all web development technologies.
</textarea>
)
}
Alternatively, if you just wanted to render some markup, you could keep the function in the TextFormEntry component and call the method in the render function, kinda like the above answer:
class TextFormEntry extends React.Component {
constructor(props) {
super(props);
}
textareaInput = () => {
return (
<textarea className="textarea-input" rows="10" cols="50">
At w3schools.com you will learn how to make a website. We offer free
tutorials in all web development technologies.
</textarea>
);
}
render() {
return (
<div>
{this.textareaInput()}
</div>
)
}
}
@JohnL3
I copy and pasted what you suggested and I get an error. TextFormEntry.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
@joesmith100
I tried all three of your suggestions:
Using <this.TextareaInput /> gives error: TextFormEntry.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
Using TextareaInput as a component gives the error:
Sorry my error … didnt realize at time my example was wrapped in another component.
so you need to change the section to whats below
render () {
let TextareaInput = (<textarea className='textarea-input' rows="10" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>)
return TextareaInput;
}
Just ran this on https://codesandbox.io/s/rmq0mmkq7p … just to make sure it worked … and it did
if i had it as a props.childeren of another component eg a component called Auxillary i would call it like my first example eg below.
Anyway hopes this helps.
render() {
let TextareaInput = (<textarea className='textarea-input' rows="10" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>)
return (
<Auxillary>
{TextareaInput}
</Auxillary>
);
}
}
In the link you provided, you’re still trying to reference Suggestion2 from within the class without referring to the this first. I know you said it didn’t work but the error you were getting there I suspect is because you weren’t returning the div from the render function in TextFormEntry, like in your first post.
If you want to just render markup then that is fine, you can still access state and props from within the TextFormEntry method if you want. However, if you really want to use a component, than I suggest you remove Suggestion2 and use the Suggestion1 function as a pure function component and call it in render like: