Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I have a class component
export default class ActivityPage extends React.Component {
constructor(props) {
super(props);
this.textarea = React.createRef();
}
componentDidMount() {
this.textarea.current.select();
}
render() {
return (
<div>
<textarea defaultValue="the quick brown fox." ref={this.textarea} />
</div>
);
}
}
When I go to a route with this component, I get the following error
I installed 16.3.2 React version.
I've fixed this issue. It was completely my fault. I didn't update the react-dom package to 16.3.2 version.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 20 days ago.
Improve this question
Problem: When importing custom functions into Cypress, I believe it cannot find the module subjects.
Subjects Array:
const subjects = [
"Accounting",
"Art",
"Biology",
"Business"
];
export default subjects;
Code Example:
import { subjects } from "../../../../src/data/subjects.js";
const subject = subjects[Math.floor(Math.random() * subjects.length)];
console.log(subject);
Error: Cannot read properties of undefined (reading 'length')
Note:
I've used Visual Studio Code's gui to obtain folder location.
My tsconfig.json in the cypress folder does not have a baseUrl key/value pair
My tsconfig.json in the root folder does have a baseUrl: "./src", but vs code shows an errors when subjects is referenced like from "src/data/subjects.js"
The exporting side of things uses the default export, so the import would be without the brackets.
import subjects from "../../../../src/data/subjects.js";
or change the export to be a named export
export const subjects = [
"Accounting",
"Art",
"Biology",
"Business"
];
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed last year.
Improve this question
I`m doing a project with react and I decided to make routes functionality a little different, I put the routes details to an separated file as an array: , and on the routes component I iterate through the array using the map function:
. But I don't know if what I did is something recommended, do you think it's better to put the routes in a static way directly in the component or is there a better solution?
It is better to use the useRoutes function provided by the react-router-dom package.
This makes your code shorter and authentication can be added easily using this procedure.
This way, you can define the main routes as an object like:
routes = (loggedIn) => [
{
path: '/',
children: [
// unprotected routes here
]
},
{
path: '/main',
element: loggedIn ? <Layout /> : <Navigate to='/login' />
children: [
// protected routes here
]
}
]
Then return useRoutes in the route component like:
const { loggedIn } = useSelector((state) => state.auth);
return useRoutes(routes(loggedIn), '');
useRoutes API: https://reactrouter.com/docs/en/v6/api#useroutes
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I am a react beginner learner. I do try to create the first project in react. But I can not output my project.
My react index.js is:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
App.js is:
import react from 'react';
import heard_title from './component/heard_title'
export default function App() {
return (
<div>
<test />
<heard_title />
</div>
);
}
my component is
import React from 'react'
export default function heard_title() {
return (
<div>
<h1>hi</h1>
</div>
)
}
But when the project is run why I can not show output hi?
First of all you should share file structure of your app so that we can understand the work flow of imports in your app.
for example
--- project
-- src
- App.js
- index.js
-- components
- heard_title.js
Once check your imports "components" or "component" directory name
You are violating one of React protocols!
Warning: <heard_title /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
To achieve your goal, update your App.js like below:
import react from 'react';
import HeardTitle from './component/heard_title'
export default function App() {
return (
<div>
<Test />
<HeardTitle />
</div>
);
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I want to import a module I've created in the app to be loaded on a certain route which has it's own routing within
You need to have Routes.forChild(routes) in your custom modules' .module.ts file
then in your main routing load your module lazily
import { CustomModule } from 'your-path'
const routes: Routes = [
{
path: 'your-path', loadChildren: () => CustomModule
}
];
As of Angular 8 the new way to import child routes is this:
{path: "user", loadChildren: () => import("./users/user.module").then(m => m.UserModule)};
Angular team did this to be more consistent with next ES and also this will be understood by the IDEs, webpack, etc.
What Omair said is correct, however I'm answering as well for the sake of having options.
You can also do this, if you prefer:
import { CustomModule } from 'your-path'
const routes: Routes = [
{
path: 'your-path', loadChildren: 'src/app/path/to/your/module/custom.module#CustomModule'
}
];
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
I get the difference between connected and unconnected components, but what is the utility in separating ALL components in this manner? All connected components rely on unconnected and vice-versa, so I'm not seeing why this pattern exists.
Connected component
import { connect } from 'react-redux';
import PrivacyPolicyUI from './PrivacyPolicyUI';
const mapStateToProps = (state) => {
return { };
};
const mapDispatchToProps = (dispatch) => {
return { };
};
const PrivacyPolicy = connect(
mapStateToProps,
mapDispatchToProps
)(PrivacyPolicyUI);
export default PrivacyPolicy;
Unconnected component
import React from 'react';
const PrivacyPolicyUI = () => (
<div> ** some content ** </div>
);
export default PrivacyPolicyUI;
I generally disagree with putting "plain" components and their connections in separate files. Most of the time there's a 1:1 correspondence between a component and its connection (ie, the mapState and call to connect are only used with one component, and that component is only used with that call to connect).
I have a saved chat log where I describe why I think separate "containers" / "components" folders are not a good idea. I also just wrote some additional comments on Reddit about structuring component connections.