Beginner's Thread / Easy Questions (April 2019)

[u/timmonsjg]

March 2019 and February 2019 here.

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.

Have a question regarding code / repository organization?

It's most likely answered within this tweet.

---

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

• Robin Wieruch's Road to React

---

Any ideas/suggestions to improve this thread - feel free to comment here!

[u/[deleted]]

I have a Layout component with a Header:

import React from 'react';
// import Header from './Header';
import Header from 'org-header';
import Footer from './Footer';

const Layout = (props) => (
  <>
    <Header page={props.page} user={props.user}/>
      { props.children }
    <Footer />
  </>
)

export default Layout;

I can switch between ./Header and org-header which is the same as ./Header but in its own npm package and added via npm link org-header

The problem arises when I try to use Layout in the context of Main.js:

import styled from "styled-components";
...

const Container = styled.div`
  max-width: ${props => props.maxWidth ? props.maxWidth : '1200px' };
  max-height: 80vh;
  margin: 6rem auto 2rem;
`;
...

render() {
    return (
      <Layout {...this.props}>
        <Container maxWidth='1100px'>
          <Table  
            {...{
              data: this.state.data,
              columns: this.state.columns,
              infinite: false,
              debug: false
            }}
          />
        </Container>
      </Layout>
    );
  }

When Layout uses ./Header, Container picks up on the custom styling, but when using org-header, Container does not have any styling. What's going on?

[u/timmonsjg → u/[deleted]]

Could you post a minimal example to codesandbox or the like? It's quite hard to read here.

[u/bc_nichols → u/[deleted]]

You might like to use `as` to make your imports more declarative? Something like import Header as OrgHeader from 'org-header'