I am new to react and trying to pass props from one functional component to another.
Here is component 1:
import React from 'react'
import TeamItem from './TeamItem'
import KKR from '../../assets/smith.jpeg'
export default function Teams() {
return (
<div>
<TeamItem title={1} />
</div>
)
}
Here is component 2:
import React from "react";
import "./teams.css";
import { makeStyles } from "#material-ui/core/styles";
import Card from "#material-ui/core/Card";
import CardActionArea from "#material-ui/core/CardActionArea";
import CardContent from "#material-ui/core/CardContent";
import CardMedia from "#material-ui/core/CardMedia";
import Typography from "#material-ui/core/Typography";
import KKR from '../../assets/smith.jpeg'
const useStyles = makeStyles({
card: {
maxWidth: 445
},
media: {
height: 240
}
});
export default function TeamItem(props) {
const classes = useStyles();
console.log(props.title, '>>>>>>>>>>>>>')
return (
<h1>{props.title}</h1>
);
}
The props.title is undefined here. I am not sure where I am wrong.
Hi #dodo As you described here Code is looking completely fine to me. I tried it locally and got the value 1 from props.title. please try restarting your server.
Related
I'm trying to render a material-ui component inside renderToStaticMarkup (because I have to integrate with another library) but none of the css styles are applied:
import * as React from "react";
import ReactDOM from "react-dom/client";
import Button from "#mui/material/Button";
import { styled } from "#mui/material";
import { renderToStaticMarkup } from "react-dom/server";
const StyledButton = styled(Button)(() => ({
backgroundColor: "red"
}));
ReactDOM.createRoot(document.querySelector("#root")).render(
<React.StrictMode>
<div
dangerouslySetInnerHTML={{
__html: renderToStaticMarkup(<StyledButton>Test</StyledButton>)
}}
/>
</React.StrictMode>
);
https://codesandbox.io/s/heuristic-bouman-d1mogi?file=/index.js:0-527
I copy and paste the examples I find (including the imports) but it doesn't recognize the objects. Something is missing in the configuration.
However this does work:
const useStyles = makeStyles((theme) =>
Imports for these 2 examples:
import React, { useState } from 'react';
import { createStyles, makeStyles, Theme } from '#material-ui/core/styles';
import InputLabel from '#material-ui/core/InputLabel';
import FormHelperText from '#material-ui/core/FormHelperText';
import FormControl from '#material-ui/core/FormControl';
import Select from '#material-ui/core/Select';
import NativeSelect from '#material-ui/core/NativeSelect';
Example copied and pasted: demo.tsx
My app.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import '../css/app.css';
import NativeSelects from './components/NativeSelects';
import { IntlProvider, FormattedMessage } from "react-intl";
ReactDOM.render(<Router><NativeSelects /></Router>, document.getElementById('root'));
I copy the content of the demo.tsx file and copy it to a NativeSelect.js
The example code that you copied is in typescript, you are probably using just javascript
How to redirect to another page in reactjs. Here is my code.
import React from 'react';
import { fade, makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import IconButton from '#material-ui/core/IconButton';
import Typography from '#material-ui/core/Typography';
import InputBase from '#material-ui/core/InputBase';
import Badge from '#material-ui/core/Badge';
import MenuItem from '#material-ui/core/MenuItem';
import Menu from '#material-ui/core/Menu';
import MenuIcon from '#material-ui/icons/Menu';
import SearchIcon from '#material-ui/icons/Search';
import AccountCircle from '#material-ui/icons/AccountCircle';
import MailIcon from '#material-ui/icons/Mail';
import NotificationsIcon from '#material-ui/icons/Notifications';
import MoreIcon from '#material-ui/icons/MoreVert';
export default function PrimarySearchAppBar() {
function logout(){
this.props.history.push({pathname:'/'})
}
}
Whenever I try to redirect its sayas "TypeError: Cannot read property 'props' of undefined"
how can i fix this?
Your component should look something like this
class PrimarySearchAppBar extends React.PureComponent {
logout = () => {
this.props.history.push({ pathname: '/' });
}
render() {
// some render logic here
return <button onClick={this.logout}>Logout</button>;
}
}
export default PrimarySearchAppBar;
Or with stateless components like this
const logout = (props) => {
props.history.push({ pathname: '/' });
}
const PrimarySearchAppBar = (props) => {
// some render logic here
return <button onClick={() => logout(props)}>Logout</button>;
}
export default PrimarySearchAppBar;
Be careful that with stateless components, you can't use this keyword, but you have to pass it like standard paramater.
I am currently having a problem getting store to be passed in as a prop and am wondering what to label a few things.
The current error is within create store, I'm unsure what to do with it.
I have tried other methods and only want to use the store method where I pass it in as a prop
import React from 'react';
import { MockGit } from './Constants';
import ExpansionPanelSummary from '#material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '#material-ui/core/ExpansionPanelDetails';
import Typography from '#material-ui/core/Typography';
import ExpandMoreIcon from '#material-ui/icons/ExpandMore';
import ExpansionPanel from '#material-ui/core/ExpansionPanel';
import Button from '#material-ui/core/Button';
import TestAPI from './TestAPI';
import { displayGitData, userInfoURL, getDataSaga } from '../sagas/sagas';
import { createStore } from 'redux';
class GitData extends React.Component {
constructor(props) {
super(props);
}
render() {
const store = createStore(...); //this is what im unsure of.
const { store } = this.props;
return (
<ExpansionPanel>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Typography> {MockGit} </Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
{displayGitData()}
{userInfoURL()}
{getDataSaga()}
<TestAPI />
</ExpansionPanelDetails>
</ExpansionPanel>
);
}
}
export default GitData;
The goal is to get store passed in as a prop with no errors.
Any help would be great, Thanks!
You're doing it wrong, here's the recommended way to use React with Redux:
store.js
import { createStore } from 'redux';
export default createStore(...)
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store.js'
const App = () => (<h1>Hello from App</h1>);
ReactDOM.render(
<Provider store={store}><App/></Provider>
document.querySelector('#react-root')
);
You now have an app that is bound with the store.
The react-redux npm package allows also to bind component props to store dispatches and store state, example:
my-component.js
import React from 'react';
import { connect } from 'react-redux';
class MyComponent extends React.Component {
render() {
return (
<p>{this.props.hello}</p>
)
}
}
export default connect(state => ({hello: state.helloReducer.value}))(MyComponent)
For further tutorials, check the official docs of react-redux, or this good youtube playlist.
Trying to use an outlined button from material UI : https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/buttons/OutlinedButtons.js
But get the error - "Unexpected use of 'self' no-restricted-globals"
And I don't have permissions to change it in the lodash.throttle/index.js file.
Is there any workaround for this that anyone knows of?? (It's literally just the sample code btw)
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '../node_modules/#material-ui/core/styles';
import Button from '../node_modules/#material-ui/core/Button';
const styles = theme => ({
button: {
margin: theme.spacing.unit,
},
input: {
display: 'none',
},
});
function OutlinedButtons(props) {
const {classes} = props;
return (
<div>
<Button variant="outlined" className={classes.button}>
Default
</Button>
</div>
);
}
OutlinedButtons.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(OutlinedButtons);
After a request. App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import UserGroup from './components/user_group';
import ButtonTest from './components/Button';
import OutlinedButtons from './components/floatingButton'
class App extends Component {
render() {
return (
<MuiThemeProvider>
<div className="App">
<header className="App-header">
{ OutlinedButtons }
</header>
</div>
</MuiThemeProvider>
);
}
}
export default App;
And index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();