ReactJS - unable to show stuff on the DOM that is in another component

Question

Hi there I'm a beginner looking for some help. I have made two .js files. One is the App.js and another is a Box component.

This is App.js

import React, { Component } from 'react';
import './App.css';
import boxComp from './Components-1/BoxComp';

class App extends Component {
    state = {
        text: "Start"
    }
       inputHandler = (event) => {
        this.setState({text: event.target.value})
    }

    render(){
        return (
            <div className = "App">
                <h1>WHY ARE U NOT WORKING</h1>
                <p>Hello world</p>
                <boxComp 
                    value = {this.state.text}
                    changed={this.inputHandler}
                >Helloooo</boxComp>
            </div>
        )
    }

}

export default App

This is my BoxComponent

import React from 'react'
import './BoxComp.css'

const boxComp = (props) => {
    return (
        <div className = "BoxComp"> 
            <p>Helloo</p>
            <input 
                type="text" 
                onChange={props.changed}
                value={props.value}
            >You have entered </input>
            <p>{props.children}</p>
            <p>You have entered: {props.value}</p>
        </div>
        )
}

However, for some reason, the paragraphs and input within the boxComp doesn't render onto the DOM and I can't seem to figure out why. Somehow, the 'Helloooo' manages to show due to {props.children}, so I'm unsure why the other paragraphs don't work. Thanks for your help!

Answer 1

A couple things:

• Your boxComp needs to be capitalized. So, fix that to const BoxComp = ..., a well as its usage to <BoxComp>...

• Secondly, you seem to be misusing the <input> tag. You don't put children in it. If you want it to display a label on it, use the label tag on it.

 <label>You have entered: {props.value}</label>
            <input 
                type="text" 
                onChange={props.changed}
                value={props.value}
            />

Here is a working demo:

class App extends React.Component {
     state = {
        text: "Start"
    }
     inputHandler = (event) => {
        this.setState({text: event.target.value})
    }

    render(){
        return (
            <div>
                <h1>[parent]WHY ARE U NOT WORKING</h1>
                <p>[parent]Hello world</p>
                <BoxComp 
                    value = {this.state.text}
                    changed={this.inputHandler}
                >Helloooo</BoxComp>
            </div>
        )
    }

}


const BoxComp = (props) => {
    return (
        <div> 
            <p>[child]Helloo</p>
            <p>{props.children}</p>
            <label>You have entered: {props.value}</label>
            <input 
                type="text" 
                onChange={props.changed}
                value={props.value}
            />
            <p>You have entered: {props.value}</p>

        </div>
        )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 2

You have quite a lot of problems in the code:

• You export App, where do u use it, and do u use it in a correct way?

import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.querySelector('#root'))

• Not exporting anything from BoxComponent

const BoxComponent = (props) => {
    // ...
}

export default BoxComponent

• When compiled, you will get an error:

  Error: input is a void element tag and must neither have children nor use dangerouslySetInnerHTML

Do the following to fix it: Remove the children inside input tags, so it looks like

<input 
  type="text" 
  onChange={props.changed}
  value={props.value}
></input>