//App.js
import React from 'react';
import Form from './Form'
class App extends React.Component{
render(){
return
<Form something={true}>
}
}
//Form.js
import React from 'react';
export default class Form extends React.Component{
render(){
return()
}
}
//Index.js
import Form from './Form';
import React from 'react';
export default (props)=>{
<Form {...props} />
}
The directory structure:
(Components
->App.js
->(Form -> Form.js, Index.js))
In App.js which component would Form be referring to because im importing from a folder? Both files insider this folder have a default export.
So why is the prop passed into index.js instead of form.js?
Related
Hello i want to pass props from index.html to App.tsx as you see i'm using typescript. so i want to do it with typescript.
my code
//index.html
<div id="root" name="test"></div> //props name test
//Index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
var container =document.getElementById('root');
ReactDOM.render(
<App name={container.getAttribute('name')} />
,
container
);
serviceWorker.unregister();
//i'm sorry i should have provided this my knowledge about typescript is very low
//App.tsx
import React from 'react';
import logo from './logo.svg';
import './App.css';
class App extends React.Component {
render(){
return (
<div className="App">
<p>{this.props.name}</p>
</div>
)
}
}
export default App;
You should add props to your App component constructor:
class App extends React.Component {
constructor(props) {
super(props);
}
render(){
I am using d3 v5 with reactJS. I am calling d3.csv inside react 'List' class like following:
import React from 'react';
import * as d3 from 'd3';
class List extends React.Component{
componentDidMount(){
d3.csv("./data/data.csv").then(function(d, error){
console.log(d);
});
}
render(){
return(
<div> </div>
);
}
}
export default List;
and List is being imported in following 'App' class
import React, { Component } from 'react';
import logo from './logo.svg';
import List from './components/list/List';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<List/>
</div>
);
}
}
export default App;
Following is the 'index.js' code:
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();
'root' is a div id in index.html. By calling console.log in List file inside d3.csv I am getting content of index.html file in the console. But I want CSV content.
You could try using the import statement to load the CSV file at first. :)
import React from 'react';
import * as d3 from 'd3';
import data from "./data/data.csv";
class List extends React.Component{
componentDidMount(){
d3.csv(data).then(function(d, error){
if (error) {
console.log(error);
} else {
console.log(d);
};
});
}
render(){
return(
<div> </div>
);
}
}
export default List;
I had the same issue and here's how I solved it. Check if the data is in the same directory as the index.html file. In my case, my index.html file is in the public/ folder, so I created public/data/data.csv. You can then try d3.csv('./data/data', function(data){...}) to read in the data.
If you are using hooks and useState, ensure that the URL is a string and not resolved as an object before using the data.
Before Input
Before Output
After Input
After Output
I am trying to learn to use react native and am following along with this YouTube tutorial. I have encountered an error stating the following, "Unable to resolve the module ... from ...: could not resolve ... as a file nor folder." I am fairly certain that the file path used is correct and I have followed the video very closely, and it appears to work in this video. Any help with this would be greatly appreciated as I am unfamiliar with using components in react.
index.js
import React, {Component} from 'react';
import { AppRegistry, Text, View } from 'react-native';
import App from './App';
import Component1 from './app/components/Component1/Component1';
export default class myapp extends Component {
render() {
return(
<View>
<Component1 />
</View>
);
}
constructor() {
super();
}
}
AppRegistry.registerComponent('myapp', () => myapp);
component1.js
import React, {Component} from 'react';
import { AppRegistry, Text, View } from 'react-native';
import App from './App';
export default class Component1 extends Component {
render() {
return(
<View>
<Text>This is Component 1.</Text>
</View>
);
}
constructor() {
super();
}
}
AppRegistry.registerComponent('Component1', () => Component1);
Try this path to your component
import Component1 from './app/components/Component1/component1';
Embarrassing question, but here we go.
I have a layout.js file that is supposed to render out my React components.
Layout.j:s
import React, { Component } from 'react'
import MainNavbar from './Navbar'
import AddButton from './AddButton'
export default class Layout extends Component {
render() {
return (
<div>
<Navbar />
<AddButton />
</div>
)
}
}
The Navbar component works fine, but my AddButton wont display at all. I've tried console.log-ging from it and nothing gets outputted in the console. So I guess my problem has to do with my component not getting linked.
Here's the file that won't get displayed:
AddButton.js:
import React, { Component } from 'react'
import { Button } from 'react-bootstrap'
export default class AddButton extends Component {
render() {
console.log('hejsan')
return (
<div>
helloooooo
</div>
)
}
}
Here is the index.js file:
index.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import Layout from './components/Navbar'
const app = document.getElementById('root')
ReactDOM.render(<Layout />, app)
I bet my problem is super basic, but I have no idea how to resolve this.
Thanks for reading!
So the mistake is very basic, you have imported Layout from Navbar which is nothing but your Navbar component and hence only Navbar is rendered, rather you should have imported it from Layout.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import Layout from './components/Layout'
const app = document.getElementById('root')
ReactDOM.render(<Layout />, app)
Also in Layout.js change
import MainNavbar from './Navbar'
to
import Navbar from './Navbar'
Could someone point out what's wrong with this piece of code for rendering a component using React. It keeps throwing an error saying "Element type is invalid ... check render method for App" and I can't see the problem.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
ReactDOM.render(<App />, document.getElementById('container'));
APP
import React from 'react';
import AppActions from '../actions/app-actions';
import Catalog from './app-catalog';
export default class App extends React.Component {
render(){
return (
<div className="container">
<Catalog />
</div>
)
}
}
CATALOG
import React from 'react';
import AppStore from '../stores/app-store';
import CatalogItem from './app-catalog-item';
function getCatalog(){
return {items: AppStore.getCatalog()}
};
class Catalog extends React.Component {
constructor(){
super();
this.state = getCatalog();
}
render(){
let items = this.state.items.map(item => {
return <CatalogItem key={item.id} item={item} />
});
return (
<div className="row">
{items}
</div>
)
}
}
Any help would be much appreciated.
You just need to export default something in Catalog:
export default class Catalog extends React.Component {
...
Otherwise, when you use the import statement nothing will import:
import Catalog from './app-catalog';
Add export to Catalog
export default class Catalog extends React.Component {
}
because now from catalog there is nothing to import, and when you do
import Catalog from './app-catalog';
you will get undefined and undefined is not valid React component, that's why you get error