CODEWITHSUNDEEP
javascriptreactjs
John
John

Reputation: 437

Unable to pass prop back to parent component

I'm doing a simple test where I have a name state in the parent component which I update when a button in the child is clicked. But this does not work, and I'm confused on if I'm doing something wrong.

Parent:

import React from "react";
import "./styles.css";
import Hello from "./Hello";

export default function App() {
  const [name, setName] = React.useState();

  const handle = item => {
    setName(item);
  };

  console.log(name);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Hello test={handle} />
      {name}
    </div>
  );
}

Child:

import React from "react";

export default function App() {
  return (
    <div>
      <button onclick={() => this.props.test("TEST")}>Activate Lasers</button>
    </div>
  );
}

What am I doing wrong?

Upvotes: 0

Views: 55

Answers (3)

Junius L
Junius L

Reputation: 16142

Pass the function as a prop.

import React from "react";

export default function App({ handle }) {
  return (
    <div>
      <button onClick={() => handle('TEST')}>Activate Lasers</button>
    </div>
  );
}

and render the component like

<Hello handle={handle} />


// Get a hook function
const {useState} = React;

function Hello({ handle }) {
  return (
    <div>
      <button onClick={() => handle('TEST')}>Activate Lasers</button>
    </div>
  );
}

function App() {
  const [name, setName] = React.useState();

  const handle = item => {
    setName(item);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Hello handle={handle} />
      {name}
    </div>
  );
}


// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Upvotes: 1

fadi omar
fadi omar

Reputation: 768

First: React events are written in camelCase syntax:

onClick instead of onclick.

second the keyword this in react usually used in-class component, and using it in a functional component to bind it with where you are using it, so now you need to pass the props to the child so that you can access the function. this should work 

import React from "react";

export default function Hello(props) {
  return (
    <div>
      <button onClick={() => props.test("TEST")}>Activate Lasers</button>
    </div>
  );
}

and third try to use the same naming for thing :) to be more readable I hope I helped you

Upvotes: 1

sourav satyam
sourav satyam

Reputation: 986

import React from "react";

export default function App(props) {
 return (
    <div>
      <button onClick={() => props.test("TEST")}>Activate Lasers </button>
    </div>
  );
}

It should be onClick Secondly you are using this which is pointing to stateless component that is undefined and have no property props within it.

Upvotes: 1

Related Questions