0

Goal:
Enable to use function Test2 with argument value "Test 2" and then to be displayed without any error.

Problem:
When I apply the code "<Test2 thename={'Test 2'} />", it shows an error saying

"Objects are not valid as a React child (found: object with keys {thename}). If you meant to render a collection of children, use an array instead."

What part of the code am I missing?

Stackblitz:
https://stackblitz.com/edit/react-ts-atrrsi?

Info:
*Newbie in ReactTS

Thank you!

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

interface AppProps {}
interface AppState {
  name: string;
}

export default function App() {
  function Test1() {
    return <h1>Test 1 works!</h1>;
  }

  function Test2(thename: string) {
    return <h1>{thename} works!</h1>;
  }

  return (
    <div>
      <Hello name={'sdf'} />
      <Test1 />
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}

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

import React from 'react';

export default ({ name }) => <h1>Hello {name}!</h1>;
HelloWorld1
  • 13,688
  • 28
  • 82
  • 145

1 Answers1

0

The props you pass to the react component are passed in an object. You need to access them from the object as follow.

function Test2(props) {
    return <h1>{props.thename} works!</h1>;
}
K450
  • 691
  • 5
  • 17