We Keep Coding

Property 'component' does not exist reactjs + materialUI + typescript?

I am creating custom typography. But while using I am getting below error.
I am following below document
https://mui.com/material-ui/api/typography/
here is my code
https://codesandbox.io/s/fragrant-mountain-eukirg
import * as React from "react";
import Typography, { TypographyProps } from "#mui/material/Typography";
import { styled } from "#mui/material/styles";
const LabelXs = styled(Typography)<TypographyProps>(({ fontWeight }) => {
return {
fontSize: 15
};
});
export default LabelXs;
I am using like this
<LabelXs component={"div"}>Div element</LabelXs>
don't why it is showing error ?
[![Property 'component' does not exist on type 'IntrinsicAttributes & SystemProps<Theme> & { align?: "right" | "left" | "inherit" | "center" | "justify" | undefined; children?: ReactNode; ... 6 more ...; variantMapping?: Partial<...> | undefined; } & CommonProps & Omit<...> & MUIStyledCommonProps<...>'.ts(2322)][1]][1]
any suggestion ?
component props is present why you are saying it is not present
https://mui.com/material-ui/api/typography/

Component seems not to be present in TypographyProps. Therefore, inspired by #SteveGomez, you can do something like: <TypographyProps & {component: React.ElementType}>
import * as React from "react";
import Typography, { TypographyProps } from "#mui/material/Typography";
import { styled } from "#mui/material/styles";
const LabelXs = styled(Typography)<TypographyProps & {component: React.ElementType}>(({ fontWeight }) => {
return {
fontSize: 15
};
});
export default LabelXs;
EDIT:
You could also use {component: keyof JSX.IntrinsicElements}.

To be able to use the component prop, the type of the props should be used with type arguments. Just use React.ElementType as mentioned in the docs.
const LabelXs = styled(Typography)<
TypographyProps & { component: React.ElementType }
>(({ fontWeight }) => {
return {
fontSize: 15
};
});
Now component accepts any React Custom Component and HTML element.
Docs

error while import functional component + Element type is invalid: expected a string or a class/function but got: undefined

I am facing the below issue in my test (enzyme test file) . I wanted to create test file for the below component. When i import it to my test file , throwed an error.
Error
Element type is invalid: expected a string (for built-in components) or
a class/function (for composite components) but got: undefined.
You likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.
Check the render method of `FormElement`.
10 | }
11 | it("render the formelement",()=>{
> 12 | mount(<FormElement {...props}/>)
| ^
13 | })
14 | })
My FormElement component
import React from "react";
import '../Styles/Form.scss';
function FormElement({ component: headerComponent, headerName }) {
return (
<section className="form_section">
<div style={{ display: "flex", alignItems: "center" }}>
<h3 style={{ paddingLeft: "15px" }}>{headerName}</h3>
</div>
{headerComponent}
</section>
);
}
export default FormElement;
My test file FormElement.test.js
import React from "react";
import {mount} from "enzyme";
import FormElement from "./FormElement";
describe("FormElement component",()=> {
const props = {
headerName: "test",
component : null
}
it("render the formelement",()=>{
mount(<FormElement {...props}/>)
})
})
My project directory would be like
ui/src/Components/Forms/Common/FormElement.js
ui/src/Components/Forms/Common/FormElement.test.js
I tried couple of ways like change FormElement component in to const like
const FormElement = () =>{
.....,
}
export default FormElement;
then in test file
import FormElement from "./FormElement"
But nothing is working i am not sure what is missing my end , could anyone please suggest .

I'm getting the error: ```TypeError: Object(...) is not a function``` in my react app- trying to use hooks for the first time

I'm having an issue with TypeError: Object(...) is not a function in my code. I tried adding semicolons but that didn't help. Here is my relevant code:
import { connect, useEffect } from "react";
import { fetchMenuItems } from "../../actions/index";
import MenuItem from "../shared/MenuItem";
const MenuItemsSelection = (props) => {
useEffect(fetchMenuItems, []);
const menuItems = props.menuItems.map((menuItem) => {
return (
<MenuItem menuItem={menuItem} />
);
});
return (
<p>{menuItems}</p>
);
};
const mapStateToProps = (state) => {
return {
menuItems: state.menuItems
};
};
export default connect(mapStateToProps)(MenuItemsSelection);
And here is my verbose error:
TypeError: Object(...) is not a function
Module.<anonymous>
src/components/Home/MenuItemsSelection.js:26
23 | };
24 | };
25 |
> 26 | export default connect(mapStateToProps)(MenuItemsSelection);
27 |
View compiled
Module../src/components/Home/MenuItemsSelection.js
http://localhost:3000/static/js/main.chunk.js:541:30
__webpack_require__
/home/jade/code/personal/final-project-flatiron-frontend/webpack/bootstrap:856
853 |
854 | __webpack_require__.$Refresh$.init();
855 | try {
> 856 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 857 | } finally {
858 | __webpack_require__.$Refresh$.cleanup(moduleId);
859 | }
View compiled
fn
/home/jade/code/personal/final-project-flatiron-frontend/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
I'm really confused, I've just been introduced to both react hooks and redux, so I don't really know what I'm doing. I'm also using thunk, though I haven't gotten that far. Please, if more information is needed, let me know in the comments.

You need to import connect from react-redux.
import {connect} from 'react-redux';
Also you cannot directly use fetchMenuItems inside useEffect.
You need to use it as props.fetchMenuItems or destructure it.
export default connect(mapStateToProps,{fetchMenuItems})(MenuItemsSelection);

Naker.back with React

Naker.Back Documentations
I came across an article that uses Naker.back to make interactive backgrounds so I decided to give it a try in my portfolio website that I plan on using MERN stack to build. I was planning to use my interactive background created and embed it into my React component.
This is the file structure for my home page now
This is the code for Background.js that I copied and edited the value based on the documentation provided and will be exported into Home.js as JSX
import React, { Component } from 'react';
import styles from './Background.module.css'
const script = document.createElement("script");
script.src = "https://d23jutsnau9x47.cloudfront.net/back/v1.0.9/viewer.js";
script.async = true;
document.body.appendChild(script);
class Background extends Component {
componentDidMount() {
window.nakerback.render({
container: document.getElementById('container'),
particle: {
direction1: {x: 0,y: 0,z: 0},
direction2: {x: 0,y: -100,z: -100},
life: 5,
power: 0.02,
texture: "https://res.cloudinary.com/naker-io/image/upload/v1566560053/flare_01.png",
number: 2000,
colorStart: [251,251,251,0],
colorEnd: [4,72,132,0.52],
sizeStart: 1.15,
sizeEnd: 2.3
},
environment: {
gradient: 'horizontol',
sensitivity: 0.8,
backgroundTop: [40,4,107,1],
backgroundBottom: [1,18,51,1]
}
});
}
render(){
return <div className={styles.background} id="container"></div>
};
}
export default Background;
Home.js code that will be exported into App.js as component for the route:
import React from 'react';
import Background from '../components/Background'
const Home = () => {
return(
<div>
<Background/>
<h1>Home</h1>
</div>
)
};
export default Home;
Error Message was thrown back:
TypeError: Cannot read property 'render' of undefined
9 | class Background extends Component {
10 |
11 | componentDidMount() {
> 12 | window.nakerback.render({
13 | container: document.getElementById('container'),
14 | particle: {
15 | direction1: {x: 0,y: 0,z: 0},

When Using MUI Button: TypeError: Cannot read property 'borderRadius' of undefined

import React, { Component } from 'react';
import './App.css';
import Screen from './components/Screen/Screen';
import Button from './components/Button/Button';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import pink from '#material-ui/core/colors/pink';
const buttonTheme = createMuiTheme({
palette: {
primary: {
main: '#2dff46',
},
secondary: pink,
}
});
class App extends Component {
render() {
return (
<MuiThemeProvider theme={buttonTheme}>
<Screen>
<div>Hello</div>
<Button variant='contained' color='primary'>
GO
</Button>
</Screen>
</MuiThemeProvider>
);
}
}
export default App;
I am simply trying to create a button with some custom colors (theme). It will work without "theme={buttonTheme}" but of course it uses the default. I get the following error:
TypeError: Cannot read property 'borderRadius' of undefined
styles
node_modules/#material-ui/core/Button/Button.js:41
38 | minWidth: 64,
39 | minHeight: 36,
40 | padding: '8px 16px',
> 41 | borderRadius: theme.shape.borderRadius,
42 | color: theme.palette.text.primary,
43 | transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
44 | duration: theme.transitions.duration.short
thanks!!

As mentioned in an earlier comment, the import statement was incorrect.
This:
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
Should be this:
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';

In case anybody else has a similar issue. The above answer never fixed my problem but pointed me in the correct direction I had to add
shape: {
borderRadius: 16
}
To my material ui theme.

So this is a two step thing for you, I'm not across Material-ui, but the main issue is that the theme-shape isn't being provided to your button component.
The first thing i'd do is debug and log out the buttonTheme constant to confirm that it is matching the theme defined in https://material-ui.com/customization/default-theme/ with the addition of your overrides.
If you can see the the shape: border-radius: 4 portion then you know it is an issue with MuiProvider, but from looking at your code it seems to be correct.
Let me know what the theme looks like (Update your question) and we can work from there