I have 4 sections in my homepage src/pages/index.js in order to make it tidy I want to break the section into 4 different components, let say src/components/foo.js src/components/bar.js src/components/baz.js and src/components/qux.js
src/pages/index.js
import React from 'react';
import {graphql} from 'gatsby';
import homeStyle from '../styles/homepage.module.scss'; // how to pass this style into Foo
import Foo from '../components/foo'
const HomePage = ({data: {ipsum}}) => {
return(
<div>
<Foo data={ipsum} />
</div>
)
}
export const loremQuery = graphql`
query {
ipsum: homepageYaml {
id
heading
}
}
`
export default HomePage
my question is how to pass/get homeStyle (css module) above into my component below, so i dont have to reimport the style on each component inside index.js
src/components/foo.js
import React from 'react';
const Hero = ({data}) => {
return(
<h1 className={?}>{data.heading}</h1>
)
}
export default Hero
Related
I"m trying to render username comments with likes and a like. please see image on demo.
All of this comes form data.json
I can't find a way to display the json properly on the tags. What am I missing here?
Sorry I'm trying my best here with react as I'm quite a beginner.
demo
my index.js
import React from "react";
import styles from "./styles";
import { getCaptionFromEdges } from "./helpers";
const Posts = (props) => {
const { data } = props;
return (
<img src={data.owner.profile_pic_url} /> // this tag works
<p>{data.owner.node.username}</p> // this tag doesn't work
<hr>
//here I should display all comments with its like.
<p>{data.node.text}</p>// this doesn't work
);
};
export default Posts;
You need to wrap your elements with another element (or a Fragment). Try the following:
import React from "react";
import styles from "./styles";
import { getCaptionFromEdges } from "./helpers";
const Posts = (props) => {
const { data } = props;
return (
<>
<img src={data.owner.profile_pic_url} />
<p>{data.owner.node.username}</p>
<hr />
<p>{data.node.text}</p>
</>
);
};
export default Posts;
Like the title says, I have a problem with styled components. They do not want to render no matter what style attributes I add to them; they simply don't want to render. Does anyone know if I made a typo or something like that? This is the code I am working with.
import React from "react";
import styled from "styled-components";
const testStyled = styled.h1`
font-size:10px;
`;
export const Datepicker = () => {
return (
<div>
<testStyled>Test</testStyled>
</div>
);
};
Now this is how I am importing it into another component:
import React from "react";
import styled from "styled-components";
import {Datepicker} from "./Datepicker"
export const AnotherComponent = () => {
return (
<div>
<Datepicker></Datepicker>
</div>
);
};
Your problem here is that React components must start with a capital letter, even if they are styled components. You can read more about it here or here.
Your code should be like this
import React from "react";
import styled from "styled-components";
const TestStyled = styled.h1`
font-size:10px;
`;
export const Datepicker = () => {
return (
<div>
<TestStyled>Test</TestStyled>
</div>
);
};
React components use PascalCase: change testStyled to TestStyled.
const TestStyled = styled.h1`
font-size:10px;
`;
export const Datepicker = () => {
return (
<div>
<TestStyled>Test</TestStyled>
</div>
);
};
I'm a beginner in React so trying to get hands on the language. But I'm getting the below error while compiling my code.
Below are the code of my Person and App components
Person Component:
import React from 'react';
const person = () => {
return <p>I'm a person</p>;
}
export default Person;
App Component:
import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';
class App extends Component {
render() {
return (
<div className="App">
<h1>I'm a React App</h1>
<Person/>
</div>
);
}
}
export default App;
import React from 'react';
const person = () => {
return <p>I'm a person</p>;
}
export default Person;
You have a typo here: your component's name should start with a capital letter (here you named it person, but it should be Person, as a component name always start with a capital), so in order to fix it you have to write it like this:
const Person = () => {
return <p>I'm a person</p>;
}
I need to export different components for the same page because they act just as configurations to render other components, I´m new to react so I struggling in finding the solution for this. Here is a codesandbox with a simple example of what I want to achieve: https://codesandbox.io/s/adoring-elion-fq4zt?file=/src/App.js
Thanks!
---- EDITED ----
Thanks for all the answers, thanks to that I realized I had a typo in the component naming, that's why my previous tries didn't work.
I leave here the updated codesandbox, since it might be useful for others:
To export more than one component in a module simply do the following:
export const ComponentOne = () => <span>Some content for ComponentOne</span>;
export const ComponentTwo = () => <span>Some content for ComponentOne</span>;
Then, when you need to import these components simply do:
import { ComponentOne, ComponentTwo } from "./path/of/components"
Please note that the import is with {} because the components are not exported as default.
On the other side, if you have only a component in your file you can simply do the following:
const Component = () => <span>Some content for Component</span>;
export default Component;
And than import as default, without the {} as in the following example:
import Component from "./path/of/components"
// component.js
export const someCom1 = () => {
return <div>Hello 1</div>
}
export const someCom2 = () => {
return <div>Hello 2</div>
}
// parent.js
import {someCom1, someCom2 } from './component.js'
in your page file remove "export" from the: export function componentOn
and keep at the button: export { ComponentOne, ComponentTwo };
to import it use: import {ComponentOne,ComponentTwo} from "./PageOne";
You can keep both components in a single wrapper like this
PageOne.js
import React from "react";
import ComponentOne from "./ComponentOne";
import ComponentTwo from "./ComponentTwo";
export default function PageOne() {
return (
<>
<ComponentOne title={"This is the title"} />;
<ComponentTwo description={"This is the description"} />;
</>
);
}
App.js
import React from "react";
import "./styles.css";
import PageOne from "./PageOne";
export default function App() {
return (
<div className="App">
<PageOne />
</div>
);
}
I am learning to develop a multi-page app with React Router. I have been following a tutorial and have managed to set up multiple page without any content. However, I want to add the original main content of the home page that was originally running properly before I used react-router. If I delete the code that is in the div called App, I have added in Home.js, then I can go back to switching between blank pages with no errors:
import React from 'react';
//import "./App.css";
import List from "./List";
import Title from "./Title";
import Ending from "./Ending";
import MoviePage from "./MoviePage";
const home = () => {
return (
<div className="App">
<Title pics={this.state.pics} changePageNumber={this.changePageNumber}/>
<List parentCallback={this.loadMoviePage} movieList={this.state.movieList}/>
<Ending toad={this.state.toad} speedUp={this.state.speedUp}/>
</div>
);
}
export default home;
So I know that I am not able to access the content from this.state.pics.(Nor the other 3 components). I created this content(and by content I mean the arrays that have the general information, i.e image location, etc). in App.Js so I am wondering how can I pass it in to this new Home.js file?
You can not access state in stateless component , if you need some data from another component you need to pass it as props from parent to children , just to show you i just make an example of your code follow it, you will get it
App.js
import React from 'react';
import Home from "./Home";
class App extends Component {
constructor() {
super();
this.state = {
pics: YourArrayDataHere,
};
}
render () {
return (
<Home pics={this.state.pics} />
);
}
export default App;
Home.js
import React from 'react';
//import "./App.css";
import List from "./List";
import Title from "./Title";
import Ending from "./Ending";
import MoviePage from "./MoviePage";
const home = (props) => { //access throught props
return (
<div className="App">
<Title pics={props.pics} />
</div>
);
}
export default home;