Passing Props

Since we now can use the MF-apps as components inside our Container-app. It's possible to pass props to those components as well:

File: container/src/App.jsx

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import { Counter } from 'counter/Counter'
import './index.css'

const App = () => {

  const [txt, setText] = useState("Initial!")
  
  const doSomething = (input) => {
    setText(input)
  }

  return(
    <div className="container">
      <h1>Container App { txt }</h1>
      <Counter text="From Container!" 
               handler={ doSomething } /> 
    </div>
  )
}

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

File: counter/src/components/Counter.jsx

import React, { useState } from "react"

export const Counter = () => {

    const [count, setCount] = useState(0);

    const action = () => {
        handler(`From sub-app: ${count}`)
    }

    return (
        <div>
            <h2>Counter App</h2>
            <p>Current count: <strong>{count}</strong></p>
            <button onClick={() => setCount(count + 1)}>+
            </button>
        </div>
    )
}

:::info Exercises

1. Can you add a new Micro framework-app to the system?
2. Read some data from an API (https://jsonplaceholder.typicode.com) and pass it to the new MF-app
3. Now let's use a useContext-hook for this. :::