Data not visible in react function - Why?

Question

I am new to React and playing with it to get familiar.

I have a component that simply puts a header and a data grid which is called in from another component.

Main component :

import './App.css';
import React,{useState} from 'react';
import {Container,Row, Col } from 'react-bootstrap';
import aboutData from './aboutData';

function About() {
  **const [name, setName]= "This is the name"**
  return (
    <div>
        <h1>About page with aboutData</h1>
        <aboutData data = {name}/>
    </div>
  );
}

export default About;

Other function :

import './App.css';
import React from 'react'
import {Container,Row, Col } from 'react-bootstrap';

function aboutData({data}) {
  return (
    <li>
        <h3>Inside grid component</h3>
      <Container>
        <Row>
          <Col>{this.data }</Col>
          <Col xs={6}>{this.data}</Col>
          <Col>3 of 3</Col>
        </Row>
        <Row>
          <Col>1 of 3</Col>
          <Col xs={5}>2 of 3 (wider)</Col>
          <Col>3 of 3</Col>
        </Row>
      </Container>
    </li> 
  );
}

export default aboutData;

I am passing a test value "This is the name" but aboutData class never renders. Could some one show me where am I doing it wrong ?

you don't need `this` keyword to access props. just use `data` in your aboutData component. Because you are using functional component and destructuring. `aboutData({data})` — mafirat, Dec 20 '20 at 01:52
Here's a good explanation as to why lowercase component names don't work: https://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters — Nick, Dec 20 '20 at 01:52
Thank you for your comments. Here is have attached the working code. Yes, I understood that now there is a difference between lower case and upper case component names thanks to Nick. — PCG, Dec 20 '20 at 17:22

score 0 · Answer 1 · answered Dec 20 '20 at 17:24

Working code that passes parameter name from Parent component to chile component. Component names should start with an Upper case letter. In my case, it should be 'AboutData' not 'aboutData'.

Parent :

import './App.css';
import React,{useState} from 'react';
import {Container,Row, Col } from 'react-bootstrap';
import AboutData from './AboutData';

function About() {
  const [name, setName]= useState('This is the name from hook');


  return (
    <div>
        <h1>About page with aboutData</h1>
        {/* <AboutData data = {name}/> */}
        <AboutData data = {name}/>
        </div>
  );
}

export default About;

Child :

import './App.css';
import React from 'react'
import {Container,Row, Col } from 'react-bootstrap';

// function AboutData({data}) {
function AboutData({data}) {
  return (
    <li>
        <h3>Inside grid component</h3>
      <Container>
        <Row>
          <Col>{data}</Col>
          <Col xs={6}>2</Col>
          <Col>3 of 3</Col>
        </Row>
        <Row>
          <Col>1 of 3</Col>
          <Col xs={5}>2 of 3 (wider)</Col>
          <Col>3 of 3</Col>
        </Row>
      </Container>
    </li> 
  );
}

export default AboutData;

Data not visible in react function - Why?

1 Answers1