I'm currently working on a react app that integrates AWS Amplify. A great tool so far but I find it hard to customize components. Especially I would like to style the AmplifySignOut-component.
According to the documentation (see last paragraph on page) passing a theme to the withAuthenticator-component does not work like this anymore.
I can't figure out how to pass a theme to the AmplifySignOut-component that overwrites the default layout for the button that is created. So far, I think that this is the default layout but I'm not 100% sure.
It would be great, if someone could point me in the right direction here :)
Im using the component like this (not working):
import React from 'react'
import { NavLink } from "react-router-dom";
import './Navbar.css'
import { AmplifySignOut } from '#aws-amplify/ui-react';
function Navbar(props) {
const MyTheme = {
NavButton: { 'fontWeight': '10' },
}
return (
<div className="navbar">
<NavLink exact to="/">Home</NavLink>
<NavLink to="/pdservice">Drucker & Netzwerk</NavLink>
<AmplifySignOut theme={MyTheme}/>
</div>
)
}
export default Navbar;
Best Regards
In my case, i just ended up writing a completely custom button which calls the amplify function. you can style this one then completely as you want. maybe this code helps?
import React from 'react'
import {Auth} from "aws-amplify";
function CustomSignoutButton() {
const signOut = (e) => {
e.preventDefault();
Auth.signOut();
window.location.reload() <!-- it also works without, but just to really kick the user out.-->
}
return (
<button onClick={signOut}>
Sign out
</button>
)
}
export default CustomSignoutButton;
Create new component (in my case it is "src\components\SignOut.js")
import React from 'react'
import {Auth} from "aws-amplify";
function SignOutButton() {
const signOut = (e) => {
e.preventDefault();
Auth.signOut().then(()=>{
window.location.reload(false);
});
}
return (
<button onClick={signOut}>
Sign out
</button>
)
}
export default SignOutButton;
Import it in your app (remember to replace path with correct one if it differs with mine)
import SignOutButton from './components/SignOut';
Then you can use it anywhere you want
<SignOutButton />
Related
I am new to React and following a tutorial. I want to create a simple welcome page and have the continue button navigate to the next web page. I receive an error message of useNavigate is called in function welcome that is neither a react function component not a custom react hook function.
import React from "react";
import { AGREEMENT } from "../navigation/CONSTANTS";
import { Route, useNavigate, Routes } from "react-router-dom";
const welcome = () => {
const navigate = useNavigate();
return (
<div>
<div>Welcome!! </div>
<button onClick={() => navigate(AGREEMENT)}>Continue</button>
</div>
);
};
export default welcome;
Capitilize function name welcome to Wecome
const Welcome = () => { ... ... };
export default Welcome;
I have just copied some code from one project to another , and console.log("this is authenticated: " + authenticated) is returning undefined although i can see authenticated as true - in redux state (when i am in local host click right click inspect then go to redux then state.)
?
is this perhaps an issue with my version of react or redux?
import React, { Component, Fragment } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import Proptypes from "prop-types";
import MyButton from "./util/MyButton";
import { logoutUser } from "./redux/actions/userActions";
import { getConversations } from "./redux/actions/dataActions";
//icons
import KeyboardReturn from "#material-ui/icons/KeyboardReturn";
///npm install #material-ui/core
import AppBar from "#material-ui/core/AppBar";
import Toolbar from "#material-ui/core/Toolbar";
import Button from "#material-ui/core/Button";
import { auth } from "./firebase";
export class Navbar extends Component {
render() {
const { authenticated } = this.props;
console.log("this is authenticated: " + authenticated);
const { user } = this.props;
return (
<AppBar>
<Toolbar className="nav-container">
{authenticated ? (
<Fragment>
<Link to="/login">
<MyButton
tip="Logout"
onClick={this.handleLogout}
>
<KeyboardReturn color="primary" />
</MyButton>
</Link>
</Fragment>
) : (
<Fragment>
<Button
color="inherit"
component={Link}
to="/login"
onClick={this.handleLogout}
>
{" "}
Login
</Button>
<Button
color="inherit"
component={Link}
to="/signup"
>
{" "}
SignUp
</Button>
</Fragment>
)}
</Toolbar>
</AppBar>
);
}
}
const mapStateToProps = state => ({
authenticated: state.user.authenticated,
user: state.user,
conversations: state.data
});
const mapActionsToProps = {
getConversations,
logoutUser
};
export default connect(mapStateToProps, mapActionsToProps)(Navbar);
Background
When I say named and default exports/imports, I'm referring to es-module exports and es-module imports.
To simplify what the above article states, think of the two as such:
named exports are objects which contain all the namespaces provided to it. For instance, export const a; export const b; will produce an object {a, b} which will be accessible to other modules by way of import {a,b} from './file' or other variants.
default exports are just named exports that contain the access modifier default in it. In other words, it's just syntatic sugar which allows you to import the default object directly without destructuring and also provides you the ability to rename the object. For example export default ReactInner will allow you to import React from "react" without any errors. However, note that ReactInner === React.
Answer
You're most likely importing the wrong component
import {NavBar} from "../file"
which imports the named component (unconnected component, in your case).
Instead, you should have used
import NavBar from "../file"
which imports the default component (the connected component, in your case)
The reason the functional component works is because redux uses context internally to connect the state of the component to the redux store. As a result, you don't require two exports and the exported components will always be connected.
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;
I created a typescript react app and installed ant design in it. Upon calling the Button Element just like in the their documentation I am getting this error. I looked up everywhere but I am not getting any solution for my problem.
this is my React Code.
import { FC } from 'react';
import { Button } from 'antd'
import './App.css';
const App: FC = () => {
return (
<div className="App">
<Button type='primary'>Button</Button>
</div>
);
}
export default App;
I think this is ant design related. Thanks for anyone who can help.
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>
);
}