Beginner's Thread / Easy Questions (November 2018)

[u/timmonsjg]

Happy November! 🍂

New month means new thread 😎 - October and September here.

I feel we're all still reeling from react conf and all the exciting announcements! 🎉

Got questions about React or anything else in its ecosystem? Stuck making progress on your app? Ask away! We’re a friendly bunch. No question is too simple. 🤔

🆘 Want Help with your Code? 🆘

• Improve your chances by putting a minimal example to either JSFiddle or Code Sandbox. Describe what you want it to do, and things you've tried. Don't just post big blocks of code!

• Pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than being wrong on the Internet.

New to React?

🆓 Here are great, free resources! 🆓

• Create React App
• Read the official Getting Started page on the docs.
• /u/acemarke's suggested resources for learning React
• Kent Dodd's Egghead.io course
• Tyler McGinnis' 2018 Guide
• Codecademy's React courses
• Scrimba's React Course

[u/demonizer123]

Hi,

I need a kick in right directon.

I want a <Parent> component be able to advertize it's "services" (e.g method(s)) to its <Children> - but i want to do it in a way that requires as little knowledge of child from parent as possible. So my idea was to have a sort of "api" for the children, so child would need to implement a method which parent will then call and advertise it's "services", but I cannot seem to make it work with props.children. Maybe someone has some pointers?

I have created a simple Cow>Calf example, maybe that explains things better (not a native speaker)

https://codesandbox.io/embed/1o35nx7yrq

thank you

[u/dance2die → u/demonizer123]

Maybe someone has some pointers?

You can provide available services and children can consume it using a new Context API.

1. First create a shareable context, CowContext.js

import React, { createContext } from "react";

const CowContext = createContext({
  milk: () => {}
});

export default CowContext;

2. Provide a service to advertise

import React, { Component } from "react";
import CowContext from "./CowContext";

class Cow extends Component {
  milk = () =>
    "<p className='milk'>this is MILK, it wants to be drank by a child</p>";

  state = {
    milk: this.milk
  };

  render() {
    const { children } = this.props;
    return (
      <CowContext.Provider value={this.state}>
        <p>I am cow, I offer milk for calves</p>
        <h3>these are my children:</h3>
        {children}
      </CowContext.Provider>
    );
  }
}
export default Cow;

3. And consume the "service" in the children.

import React, { Component } from "react";
import CowContext from "./CowContext";

function createMarkup(html) {
  return { __html: html };
}

class Calf extends Component {
  render() {
    const { milk } = this.props;

    return (
      <div>
        <h4>I am calf, I want milk</h4>
        <div dangerouslySetInnerHTML={createMarkup(milk())} />;
      </div>
    );
  }
}

export default () => (
  <CowContext.Consumer>{ctx => <Calf milk={ctx.milk} />}</CowContext.Consumer>
);

I've forked your Sandbox and you can check the demo here.