I am trying to get a search bar to display on my main app in React. To do this I have created a new component called searchBox to be used later and therefore I can't just directly app the input to my App.js file.
My code for my App.JS file looks like :
import React, { Component } from 'react';
import CardList from './CardList';
import searchBox from './searchBox';
import { robots } from './robots';
const App = () => {
return (
<div>
<h1> Contacts </h1>
<searchBox />
<CardList robots={robots} />
</div>
)
}
export default App;
My searchbox.js file looks like :
import React from 'react';
const searchBox = () => {
return(
<input type='search' placeholder='search contacts' />
);
}
export default searchBox;
The header is displaying but the searchbox is not. I have the file save in the src folder as searchBox so I don't think the issue is to do with saving the file in the wrong location.
User defined components must be capitalized.
https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized
Can you capitalize S in your searchBox? React expects component names to start with capital letter.
Related
I am new to React Framework. I am having trouble exporting a usestate value queryCity to another js file.
I have a code React index.js code like below:
import React, { useState } from "react";
const Home = () => {
const [queryCity, setQueryCity] = useState("New York");
return(
<div>
<input
type="text"
className="search-city"
placeholder="New York "
value={queryCity}
onChange={(e) => setQueryCity(e.target.value)}
/>
</div>
);
};
export default Home ;
Another file called 'Search.js' needs the queryCity from Home module.
I have tried createContext. But the Search.js is not the child component of Home
Because globalCity is scoped to the Home component, you will not have access to it in a parent scope.
If you want to access globalCity in another file, move it out of the Home component and into the parent scope and also export it.
import React, { useState } from "react";
export const globalCity = "New York";
const Home = () => {
...
I am starting a React Project. I am trying to construct the message board page and I have Components for the Left, Center, and Right Portion of the page. The Center is where the user posts will go. Left and Right are News, Events.. etc.
My file structure is as follows:
--client
----Public
------|index.html
--------src
----------components
-----------Center
------------|CenterForm.js
------------|Post.js
-----------Left
-------------|LatestNews.js
-------------|LeftForm.js
-------------|Trending.js
-------------|WatchList.js
-----------Whole
-------------|WholeComponent.js
Ultimately, I wanted to construct each piece then combine them in the whole component so that row and columns would be smooth.
I get this error: ./src/components/Whole/WholeComponent.js
Module not found: Can't resolve './components/Center/CenterForm' in '/Users/edwarddeleon/Desktop/ct-app/client/src/components/Whole'
and for the Left when I remove the center section.
CenterForm Component:
import React from 'react';
import Post from './Post';
const CenterForm = () =>
<div className="col 4">
<Post />
</div>
export default CenterForm;
Post Component(will be changed when I go to implement user comment function):
import React from 'react';
const Post = () =>
<div className="posthere">
<span>post will be here</span>
</div>
export default Post;
Whole Component:
import React from 'react';
import LeftForm from './components/Left/LeftForm';
import CenterForm from './components/Center/CenterForm';
const WholeComponent = () =>
<div className="container">
<div className="row">
<LeftForm />
<CenterForm />
</div>
</div>
export default WholeComponent;
App.js:
import React, { Component } from 'react';
import Nav from "./components/Nav";
import WholeComponent from './components/Whole/WholeComponent';
class App extends Component {
render() {
return (
<div className="App">
<Nav />
<WholeComponent />
</div>
);
}
}
export default App;
Thank you Community!
You have false path for the component.
Your import in the WholeComponent should be like this
import LeftForm from '../Left/LeftForm';
import CenterForm from '../Center/CenterForm';
Because, you need to backward the directory where Center and Left component are placed.
I'm teaching myself React-Native and I came across this strange roadblock. Inside my App.js I'm trying to export a class and then use another file within my App.js which is inside the somePage() function. where I'm calling <Header/> in an attempt for that text to appear on my physical device upon hitting refresh.
It displays <Login/> perfectly, but not what's within the somePage() function. My question is, why?
(I'm using Expo by the way, instead of having an index.ios.js file it's an App.js file that still supports cross platform development).
Here's my App.js file:
import React, { Component } from 'react';
import {AppRegistry} from 'react-native';
import Login from './components/Login';
import Header from './components/Header';
export default class Project extends Component {
render() {
return (
<Login/>
);
}
}
const somePage = () => (
<Header/>
);
AppRegistry.registerComponent('someProject', () => Project);
AppRegistry.registerComponent('someProject', () => somePage);
Here's my Header.js file:
import React from 'react';
import {Text} from 'react-native';
const Header = () => {
return <Text>Testing this out</Text>
}
export default Header;
The concept of react is that a parent component renders child components. You only need to register once because the root component is the parent component of all other components. Any other child or grandchild components you want to render must be descendants of the root component. As a side note, you don't need to have export default in front of the Project component, because you aren't exporting it anywhere: you are registering it below.
To fix your app, you need to place the header component inside the registered root component:
import React, { Component } from 'react';
import {AppRegistry, View } from 'react-native';
import Login from './components/Login';
import Header from './components/Header';
class Project extends Component {
render() {
return (
<View>
<Header/>
<Login/>
</View>
);
}
}
AppRegistry.registerComponent('someProject', () => Project);
Line no.3 below, I got unexpected cannot find module error in my console. It's so strange, my code and file structure look just fine.
import React from 'react';
import UserList from '../containers/user-list';
import UserDetail from '../containers/user-detail';
require('../../scss/style.scss');
const App = () => (
<div>
<h2>Username List:</h2>
<UserList></UserList>
<hr />
<h2>User details</h2>
<UserDetail />
</div>
);
export default App;
As per es5 syntax you can not require like this in line 4 you have to code like this:
If your app.js is in components then it would solve your problem:
import React from 'react';
import UserList from '../containers/user-list';
import UserDetail from '../../containers/user-detail';
var style = require('../../../scss/style.scss');
const App = () => (
<div>
<h2>Username List:</h2>
<UserList></UserList>
<hr />
<h2>User details</h2>
<UserDetail />
</div>
);
export default App;
I have recently installed Material UI into my Meteor application using npm install --save material ui
I have gotten the <Header /> component showing up in my app.js file, but whenever I add other components, localhost:3000 simply displays a blank page. Please see my code below:
header.js
import React, { Component } from 'react';
import AppBar from 'material-ui/AppBar';
class Header extends Component {
render() {
return(
<AppBar
title="Header"
titleStyle={{textAlign: "center"}}
showMenuIconButton={false}
/>
);
}
}
export default Header;
app.js
import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Header from './components/header';
import NewPost from './components/new_post';
const App = () => {
return (
<MuiThemeProvider>
<Header />
</MuiThemeProvider>
);
};
Meteor.startup(() => {
ReactDOM.render(<App />, document.querySelector('.render-target'));
});
THE ABOVE CODE WORKS WELL (see screenshot below)
However, if I add another component I get a blank screen
header.js is the same
new_post.js
import React, { Component } from 'react';
import TextField from 'material-ui/TextField';
class NewPost extends Component {
render() {
return (
<TextField
hintText="Full width"
fullWidth={true}
/>
);
}
}
export default NewPost;
app.js
import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Header from './components/header';
import NewPost from './components/new_post';
const App = () => {
return (
<MuiThemeProvider>
<Header />
<NewPost />
</MuiThemeProvider>
);
};
Meteor.startup(() => {
ReactDOM.render(<App />, document.querySelector('.render-target'));
});
The result is simply a blank screen
Why does adding one more component (<NewPost />)inside of <MuiThemeProvider> result in a blank screen? I referred to the material-ui documentation and their sample projects but their application structure is not similar to mine. Any advice? Please let me know if you need more info to make this question clearer.
Wow very strange but I managed to get it working by simply adding a <div>
app.js
const App = () => {
return (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<div>
<Header />
<NewPost />
</div>
</MuiThemeProvider>
);
}
Meteor.startup(() => {
ReactDOM.render(<App />, document.querySelector('.render-target'));
});
I would really appreciate if anyone could explain why adding a div makes this all work. Thank you!
I would really appreciate if anyone could explain why adding a div
makes this all work
If you look at the browser warning, "Invalid prop children of type array supplied to MuiThemeProvider, expected a single ReactElement.".
So, when you add a <div/> around your components, it wraps them together and turns them into a single react element.
MuiThemeProvider renders as null so you have to wrap children do anything - for example React.Fragment