I am trying to create a simple button on native script called 'login'. I have created a login component but when I test the code it says no known component for element Login.
<template>
<Page>
<TabView height="100%" />
<ActionBar title="Home" />
<ScrollView>
<StackLayout class="home-panel">
<!--Add your page content here-->
<Label textWrap="true" text="Play with NativeScript!"
class="h2 description-label" />
<Button text="Login" #tap="onLoginTap" />
<Login>
</StackLayout>
</ScrollView>
</TabView>
</Page>
</template>
<script>
import Login from "./login";
export default {
data() {
return {};
};
},
methods: {
onLoginTap: function() {
this.$navigateTo(Login);
});
</script>
You have various issues in your code
You can only navigate between Page, your login component was not wrapped by Page element
I'm not sure why you are using TabView, it's used only when you have tabbed application and there is a specific component hierarchy. Refer documentation for more details. I have removed it as it doesn't seem required for your Page
You are not suppose to embed Login as a tag in the same Page
Overall I would suggest you to go through the basics of docs to avoid such issues.
Updated Playground
Related
I have something similar to the following CodeSandBox example where I need to use react routing within two different components.
The problem that I am facing is that, if using this codesandbox example and I click down to either the Profile or Quotes component level and assuming I have the following Material-UI button within each of these bottom components:
<Button>
text="New Item"
variant="outlined"
className={classes.newButton}
component={NewItem}
to={'/new-item'}
</Button>
When clicking on this "New Item" button, the URL changes to the correct route, i.e. /new-item but the actual NewItem component is not being rendered in the page?
If I refresh the browser, then it loads correctly.
Can anyone pls assist with the above and what the best solution is, when at this level?
Arthur, make sure in your index.js or wherever you are declaring your switch its set up like so.
<Switch>
<Route exact path="/NewItem" component={NewItem}/>
</Switch>
Then you can simply add a nav link like so
<Link to="/NewItem">New Item</Link>
the button will have a component of Link which is imported from react-router-dom
<Button>
text="New Item"
variant="outlined"
className={classes.newButton}
component={Link}
to="/new-item"
</Button>
and in the app.js you will create a Route like so :
<Switch>
<Route exact path="/NewItem" component={NewItem}/>
</Switch>
Well you shouldn't use button for changing go to new Page or going new URL. rather than use
<link to=""/> for routing but if you want to use button for going to different page than use Redirect from react-router-dom
import { Redirect } from 'react-router-dom';
const Next = (e) => {
e.preventDefault();
return <Redirect to='/NewItem' />;
};
<Button onClick={Next}>
text="New Item" variant="outlined" className={classes.newButton}
component={NewItem}
</Button>;
Or you can use Link using Link
import {Link} from 'react-router-dom';
<Link to={'/NewItem'} className={classes.newButton}>
New Item
</Link>;
Hello dear colleagues,
I have a question based on a project I'm doing in a course I'm rolled.
All of my code is practicaly build, the only thing that I'm with difficulties to implement is a button which I have to display and by clicking this button it'll take me to a search page. I've implemented the link, which appears as a hyperlink in the main page, but it'd be in place of this hyperlink the button.
My main page is displaying the hyperlink like this (note the hyperlink in the bottom of the page at the right side):
Main Page With Hyperlink
But, according to the project requirements, the main page would display the button like this (with functionallity to take me to the search page, as the hyperlink does):
Main Page With Button Displayed
Below I show to you part of the codes I've done for the components:
Part of App.js code:
The beggining of the code:
import React from 'react';
import { Route } from 'react-router-dom';
import Home from './Home';
import Search from './Search';
import * as BooksAPI from './BooksAPI';
import './App.css';
class BooksApp extends React.Component {
state = {
books: []
}
The part with the Route:
render() {
return (
<div className="app">
<Route exact path="/" render={() => (
<Home
books={this.state.books}
changeShelf={this.changeShelf}
/>
)} />
<Route path="/search" render={() => (
<Search
changeShelf={this.changeShelf}
books={this.state.books}
/>
)} />
Part of main page code (Home.js):
The beggining of the code:
import React, {Component} from 'react';
import { Link } from 'react-router-dom';
import Book from './Book';
class Home extends Component {
The part which displays the link instead of the button:
<div className="open-search">
<Link to="/search">
Add a book
</Link>
</div>
So, I'd need some clarity here, what am I doing wrong in this code?
Please, if you'll need other code parts, please tell me that I put here, but I think these parts are enough for you to help me.
Regards.
You need to wrap your button in Link. See below.
<div className="open-search">
<Link to="/search">
<YourButtonComponent/>
</Link>
</div>
By doing this <YourButtonComponent/> is acting the same way that the text Add a Book does. It's wrapped in Link, so clicking on the <YourButtonComponent/> is the same as clicking the Link.
I am building a ReactJS application and have a typeform which I embed to the middle of the page. Problem is that as soon as the Type-Form loads in the https://www.npmjs.com/package/#heyjobs/react-typeform-embed
Code:
class OverTheCounter extends Component {
render() {
return (
<div className="OtcContainer">
<div className="overTheCounterPage">
{/*<img src={image1} alt="HeaderImage" />
<h1 >Over the counter</h1>
</div>
<OtcIcon />
*/}
</div>
<ParallaxHeader />
<div className="typeForm">
<ReactTypeformEmbed
className="typeForm"
url="https://xxx.typeform.com/to/XXX"
/>
</div>
<OtcIcon />
<Footer />
</div>
);
}
}
export default OverTheCounter;
So for the react embed component you're using I can't comment or explain how it works. However I recently created and maintain a web components library (which from my tests works well with React).
You can install it with
npm install typeform-elements
And import the embed library into your apps entry point with:
import 'typeform-elements/dist/embed';
And finally use the component as so...
<typeform-standard url="{typeform_url}"></typeform-standard>
The embed component has a few attributes you can use and learn about here. And if things don't work, open an issue!
For example, here is some of my React codes.
class App extends Component
{
render(){
return (
<div className="App">
<Header/>
<LoginApp />
<Register />
<Footer />
</div>
);
}
}
export default App
Now, I'd like to include the warning panel into this class, but the file was written using just only simple HTML and JavaScript codes. Is there any ways to load the dot html files into the React component class?
Here's the idea.
<div className="App">
<Header/> <--React Component
<LoginApp /> <--React Component
<Register /> <--React Component
<Footer /> <--React Component
// Load other external html files here... (Non React component)/
</div>
Thank you very much.
PS.I'm extremely new to React.
There are 2 ways for that
Fetching HTML or Setting as Inner HTML
visit this link, There is a code for explain how to do this
Add html file to a react component
also this will help Add react to a simple HTML file
I have a component comment.js
export default function Comment (props) {
return (
<div className="comment-wrapper">
<img src={props.userImage} />
<p className="comment">{props.commentTitle}</p>
</div>
);
}
So I just simply want to have that component in the parent component as
<Comment userImage="IMAGE_LINK" commentTitle="BLAH BLAH" />
Again, I am using the Create-React-App build system from facebook. With that being said I know I can hard code an image using the following
<img src={require(`./images/MY-IMAGE.png`)} />
The code above works perfectly fine for the test image I am trying to load. However, when needed dynamically for the component the issue gets a bit more complex.
Now with the comment.js component above, I cannot do
<img src={require("./images" + {props.userImage})} />
I have taken a look at one thread on this site as well as reading this blog post on the issue and can still not come to a conclusion.
How can I handle image assets being passed as props to a component, in this case?
you can use import
// parent component
import MenuImage from '/img/menu.png'
<Comment image={MenuImage} commentTitle="Title"} />
then on Comment component
export default props => (
<img src={props.image} alt='' />
)