I'm not sure why my text area isn't rendering if someone could suggest what I'm missing or what I've done wrong I'd be forever grateful.

I'm not sure whether maybe I should try rending it in the App.js file.

I'm also sure I don't need to import the App.js file to the CardCheck.js because it's a child.

import "./App.css";
import React from "react";
import CardCheck from "./CardCheck";

class App extends React.Component() {
  state = {
    cardNumber: "",
  };

  handleChange = (event) => {
    this.setState({ cardNumber: event.target.value });
  };

  handleClick = () => {
    const { cardNumber } = this.state;

    this.setState({
      cardNumber: "",
    });
  };

  render() {
    const { cardNumber } = this.state;

    return (
      <div className="App">
        <h1>Taken Yo Money</h1>
        <CardCheck
          cardNumber={cardNumber}
          handleChange={this.handleChange}
          handleClick={this.handleClick}
        />
      </div>
    );
  }
}
export default App;


function CardCheck(props) {
  const { cardNumber, handleChange, handleClick } = props;

  return (
    <div className="TweetInput">
      <div className="bar-wrapper"></div>
      <textarea onChange={handleChange} value={cardNumber}></textarea>
      <footer>
        <button onClick={handleClick}>Enter Card Details</button>
      </footer>
    </div>
  );
}
export default CardCheck;

CodePudding user response：

Remove the parentheses from class App extends React.Component(). It should be

class App extends React.Component {
    //rest of the code
}
``

CodePudding user response：

You need to replace class App extends React.Component() with class App extends Component { The Component is imported from import React, { Component } from "react";

It should fix the rendering issue