CODEWITHSUNDEEP
javascripthtmlreactjs
Rafa Romero
Rafa Romero

Reputation: 2716

React Input text now being shown

I'm trying to create a composed input text (joining 4 input components) but i'm not being able.

Everything seems to be OK and the only way I Have been able to show the input text is placing it in the render of the main React component (cardform). In the DOM explorer (chrome) the only componet I an empty cardNumberFullField

This is the HTML:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel" src="script.js"></script>
</body>
</html>

This is the JS:

    class CardForm extends React.Component {
    constructor(props) {
        super(props)
    }

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

function cardNumberFullField() {
    return (
        <div>
            <cardNumberInputField inputName="0" />
            <cardNumberInputField inputName="1" />
            <cardNumberInputField inputName="2" />
            <cardNumberInputField inputName="3" />
        </div>
    )
}

function cardNumberInputField(props) {
    return (
        <div>
            <input id={props.inputName} name={props.inputName} type="text" />
        </div>
    )
}

// Main render
ReactDOM.render(<CardForm />, document.getElementById("root"))

Upvotes: 0

Views: 34

Answers (1)

Arup Rakshit
Arup Rakshit

Reputation: 118271

React custom components always needs to be in Capitalized. So cardNumberFullField should be CardNumberFullField, cardNumberInputField should be CardNumberInputField

Check Specifying The React Element Type.

The first part of a JSX tag determines the type of the React element.

Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX expression, Foo must be in scope.

class CardForm extends React.Component {
  constructor(props) {
    super(props);
  }

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

function CardNumberFullField() {
  return (
    <div>
      <CardNumberInputField inputName="0" />
      <CardNumberInputField inputName="1" />
      <CardNumberInputField inputName="2" />
      <CardNumberInputField inputName="3" />
    </div>
  );
}

function CardNumberInputField(props) {
  return (
    <div>
      <input id={props.inputName} name={props.inputName} type="text" />
    </div>
  );
}

// Main render
ReactDOM.render(<CardForm />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Upvotes: 2

Related Questions