title: How can I call the function of a parent component inside of a child component?
body: <p>First off, I'm newer to react so please feel free to critique any sort of architectural problems I have, I feel like there's a better way to write this but I've been struggling for an hour trying to get it to work.</p>
  <p><strong>Parent Element (TileGrid):</strong></p>
  <pre><code>import React, { Component } from 'react'
  import Tile from './Tile.js';
  
  export default class TileGrid extends Component {
      constructor(props) {
          super(props);
      }
  
      updateTileData(value) {
          {/* Do something with value here */}
      }
  
      render() {
          this.test()
          return (
              {/* The Tile component is a custom button with some richer features. */}
              &lt;Tile name='Dog' image='dog' /&gt; 
          )
      }
  }
  </code></pre>
  <p><strong>Child Element (Tile):</strong></p>
  <pre><code>import React from 'react';
  import ButtonBase from '@mui/material/ButtonBase';
  import './styles/Tile.css';
  
  function Tile(props) {
      return(
          &lt;div className=&quot;Tile&quot;&gt;
              &lt;ButtonBase onClick={/* This is where the Tile needs to call updateTileData in TileGrid */}&gt;
              Button
              &lt;/ButtonBase&gt;
          &lt;/div&gt;
      );
  }
  
  export default Tile;
  </code></pre>
  <p>So there's a function inside of TileGrid called updateTileData that is going to take some data and use it to update the state of TileGrid. The Tile component exists as a child within the TileGrid component. I've tried all sorts of stuff on here but this seems like a simple task to do, is there a better way to write this functionality? I'm not tied down to anything in the code, please tell me if there's a better way to do this. I'm still learning this framework and this issue has me hung up. Thanks, Archer.</p>