I have this HomeContainer component, Home component and this Header component.
HomeContainer contains the state of city and <Home city={this.props.city} />
Home contains stateless function and contains JSX. so via this.props i can access HomeContainer's city
Problem - I want to send the data to Header so that i can update the city in header whenever someone inputs something in the input field
I think The Main component has access to child components but the Main component is called via routes so i am not able to figure this out.
Thanks
You have a jsx structure similar to:
<Main>
<Header />
<HomeContainer />
</Main>
Since the city property is to be used by both <Header /> and <HomeContainer />, then it shouldn't be defined in <HomeContainer />
city should instead be defined as a state in <Main /> and passed down to both <Header /> and <HomeContainer />
This implies that you also define the callback to changeCity() in <Main /> and pass it down to <HomeContainer /> as a prop.
This way, both <Header /> and </HomeContainer> will be updated with changes to the city attribute
Related
In the 1st, basic example in the quickstart, they include the nav (which is common to all routes) in the Router (pasted below for convenience). I can't tell from the code that this is necessary or preferable.
Must I/is it somehow best to likewise put my common components/elements inside the Router?
I suspect this was this simply shorthand to avoid wrapping multiple elements in the return from render (implicit render in this case).
// ...
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
// ...
It looks like I found my answer 😅.
If the common elements/components do not require use of any other react-router components, it should be ok to move them outside. In the linked example, the nav uses the react-router Link component, and so should be inside Router (same is true for other react-router components, e.g. Route
I'm doing a small project in Ember, which I'm really new to. I have an Ember app with a main page/route.
Main pic
What I want is that if I click on "About" etc., the contents of that route (some text, pic, whatever) will be displayed on the page in left column let's say, or wherever else I want it on the page.
So far everything I tried makes the contents appear under the footer.
I tried doing this in about.hbs, thinking that if I specify the position of the contents with , which is how the page is sectioned in the index.html file, it would work. But no, all it does is creating an identical left column under the footer.
{{page-title "About"}}
<div class = "container">
<div class = "left-col">
<p>hello</p>
</div>
</div>
{{outlet}}
Any help would be appreciated!
Ember uses a tree for routing. The application route is the root of the tree. All other routes are child of the application route.
Routes are registered in app/router.js. The application route is not registered explicitly.
If a route has at least one child an index route is created automatically.
Let's the example from the official Ember tutorial to illustrate:
import EmberRouter from '#ember/routing/router';
import config from 'super-rentals/config/environment';
export default class Router extends EmberRouter {
location = config.locationType;
rootURL = config.rootURL;
}
Router.map(function () {
this.route('about');
});
It registers a about route as you are trying to do. This creates the following routing tree:
application
index
about
A child route is rendered within the {{outlet}} of its parent route.
Let's take an example again. Let's assume you created this three template:
{{!
app/templates/application.hbs
template for application route
}}
<div class="container">
{{outlet}}
</div>
{{!
app/templates/index.hbs
template for index route
}}
<p>Landing page</p>
{{!
app/templates/about.hbs
template for about route
}}
<p>About me</p>
If a user visits the index route the following HTML markup will be rendered:
<div class="container">
<p>Landing page</p>
</div>
If a user visits the about route the following HTML will be rendered:
<div class="container">
<p>About me</p>
</div>
Please find more information about this in routing chapter of Ember's official guides.
I'm doing some project in React and I have some outer library which creates <div> outside of the <div class="root"> component (in root are all React generated html components) and show library functionality in this component outside of the root. I want to style this component and in the best way to pack it to React, but its not possible. So is there some possibility how to say to my outer component to copy position of some React component? I can style this outer component with some "fixed" coordinates but its so dirty way and I would have problems with different resolutions.
Example:
<body>
<div class="root> <div class="copy-to-this></div> </div>
</body>
<div class="librarycomponent"> </div>
I want from .librarycomponent to copy exact position of .copy-to-this. Thanks for answer!
I am developing several React Projects like below that.
index.js
import ReactDOM from 'react-dom';
import React from 'react';
ReactDOM.render(<App />, getElementById("root"));
App.js
import React from 'react';
const App = () => (
<div className="App">
<header>header</header>
<main>main</main>
<footer>footer</footer>
</div>
);
index.html
<html>
<head>...</head>
<body>
<div id="root"></div>
</body>
</html>
when I built above them, I could get output like below that.
index.html
<html>
<head>...</head>
<body>
<div id="root">
<header>header</header>
<main>main</main>
<footer>footer</footer>
</div>
</body>
</html>
and I wonder whether this Markup Structure is okay.
Because the <body /> tag has <div id="root" /> and it has <header /> and <main /> and <footer />.
I thought it should be changed like below that.
index.html
<html>
<head>...</head>
<body>
<header>header</header>
<main>main</main>
<footer>footer</footer>
</body>
</html>
so, I tried to change my codes like below that.
index.js
import ReactDOM from 'react-dom';
import React from 'react';
ReactDOM.render(<Header />, getElementById("header"));
ReactDOM.render(<App />, getElementById("root"));
ReactDOM.render(<footer />, getElementById("footer"));
App.js
import React from 'react';
const App = () => (<>App</>);
const Header = () => (<>Header</>);
const Footer = () => (<>Footer</>);
index.html
<html>
<head>...</head>
<body>
<header id="header"></header>
<main id="root"></main>
<footer id="footer"></footer>
</body>
</html>
I want to know which structure(?) is better and why.
React tells us why we shouldn't use <body> as the container to mount our App on:
If you try this:
const rootElement = document.body;
ReactDOM.render(<App />, rootElement);
You will get this warning:
Warning: render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try rendering into a container element created for your app.
That's why you should stick to the root <div id="root">
It will not hurt your website semantic.
https://www.w3schools.com/html/html5_semantic_elements.asp
Examples of non-semantic elements: and - Tells nothing about its content
NOTE: if you do the way that you're suggesting, you'll be needing to mount 3 different components. One for the header, one for the main and one for the footer. How would you share state between them? How would the header component be aware of the state changes that happen on the body component and vice-versa?
From https://reactjs.org/docs/thinking-in-react.html :
Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. This is often the most challenging part for newcomers to understand, so follow these steps to figure it out:
For each piece of state in your application:
Identify every component that renders something based on that state.
Find a common owner component (a single component above all the components that need the state in the hierarchy).
Either the common owner or another component higher up in the hierarchy should own the state.
If you can’t find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.
What are you worried about, the div wrapping your app? There's no problem with that at all. div (and span) are non-semantic elements, so they don't have any effect on the document structure as such.
This is wrong, don't start your React app like this :)
ReactDOM.render(<Header />, getElementById("header"));
ReactDOM.render(<App />, getElementById("root"));
ReactDOM.render(<footer />, getElementById("footer"));
It bootstraps three separate apps with no way to idiomatically share state amongst them.
I have a situation like that:
<div prefix='schema: http://schema.org/ health-lifesci: https://health-lifesci.schema.org' typeof='schema:TravelAction'>
...
<div property='schema:agent' typeof='health-lifesci:Dermatology'>
<meta property='schema:name' content='My Doctor' />
...
</div>
</div>
Dermatology is a MedicalBusiness which is an Organization. This is shown in the relevant page of schema.org.
However, the structured data tool recognizes it as Thing.
agent
#type Thing
name My Doctor
What am I doing wrong?
Schema.org extensions, like health-lifesci, also use the core namespace http://schema.org/.
Each term from an extension lists its canonical URI that should be used. On http://health-lifesci.schema.org/Dermatology it says:
Canonical URL: http://schema.org/Dermatology
So your HTML+RDFa should be:
<div prefix='schema: http://schema.org/' typeof='schema:TravelAction'>
<div property='schema:agent' typeof='schema:Dermatology'>
<meta property='schema:name' content='My Doctor' />
</div>
</div>
However, the Dermatology type is not an expected value for the agent property. It expects an Organization or Person value, but Dermatology is neither; it’s a MedicalSpecialty enumeration value.
(I’m not sure why Dermatology is listed as sub-type of MedicalBusiness, but without listing this as parent on its page.)