React - Markdown Previewer issue

[thisiswhale]

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>
	);

Things I’ve tried:

• function TextareaInput()
• const TextareaInput = () => {…}
• removed enclosed div

[JohnL3]

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}
  )
}

[joesmith100]

Hi @thisiswhale

There’s a couple of problems I can see that would cause it to stop working.

First of all, you’re not returning anything from the render method in your first example, so you’d need to change that.

Secondly, you’re trying to reference the TextareaInput function from render without this, so for it to work you’d want to do something like:

render() {
  return (
    <div>
       <this.TextareaInput />
    </div>
  )
}

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>
  )
}

And then calling it in render:

render() {
  return (
    <div>
      <TextareaInput />
    </div>
  )
}

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>
    )
  }
}

[thisiswhale]

@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.

[thisiswhale]

@joesmith100
I tried all three of your suggestions:

1. 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.

2. Using TextareaInput as a component gives the error:
   
   
3. Calling method in the render function gives the error:
   
   

[PortableStick]

You may not have Babel set up correctly. 2) looks like it should be working. When you’re creating ES6 class methods, you omit the function keyword.

class SomeComponent {
  TextAreaInput() {
    return "stuff"
  }
}

[JohnL3]

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>
      );
  }
}

[thisiswhale]

Thanks for clarifying things @JohnL3. But I still want to figure out why calling the function isnt working.
TextAreaInput() {...}

Heres the link I’m testing on.

Markdown Previewer - CodeSandbox

[JohnL3]

Ok got it to work … https://codesandbox.io/s/n34q8lj39j
But i dont think its a good idea to be doing it this way

[joesmith100]

Hi @thisiswhale

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.

I just tested in the sandbox and this works:

render() {
  return (
    <div>
      <this.Suggestion2 />
    </div>
  );
}

– Just seen your update.

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:

render() {
  return (
    <div>
      <Suggestion1 />
    </div>
  );
}

[thisiswhale]

Thanks for clarifying