We Keep Coding

Why does my Import in React change my layout without me implementing the imported component?

Issue: The import statement on line 1 from App.js imports a component called Box. However, without me implementing the component in App.js, the Box still appears on my screen.
App.js
import Box from './Box';
import React from 'react'
function App() {
return (
<div>
</div>
)
}
export default App;
Box.js
import React from 'react'
function Box() {
return (<div style={{height:'30px', width:'30px', backgroundColor:'black'}}></div>)
}
export default Box;
The output:

React conditional rendering - executes code of alternate condition component

Content.js file
import React from 'react';
const Content = () => {
console.log('content called');
return (<div>Content</div>);
};
export default Content;
App.js file
import React from 'react';
import Content from './Content';
const App = () => {
const isUserAuthenticated = false;
return (
<div>
{
isUserAuthenticated
? <Content/>
: <></>
}
</div>
);
}
export default App;
Even though the condition is false, Content component gets loaded and console.log is executed.
Is it because I have imported the file ?
I do not see the HTML added to the DOM though.

Can you try this on your App.js :-
import React from 'react';
import Content from './Content';
const App = () => {
const isUserAuthenticated = false;
return (
<div>
{isUserAuthenticated && <Content/>}
</div>
);
}
export default App;

I would also go ahead and say you are using it somewhere else, and you haven't noticed. Look through your code!
I put up this sandbox real quick to check it for myself, and the conditional rendering works as expected.
Check if out if you'd like.

Search component not displaying on app component in React

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.

Problem with exporting/importing React component

I'm trying to create a React component for a navigation bar.
This component I'd like to import from a separate file into my App.js.
Currently, the component should just return a simple 'Hello world' paragraph, but I have trouble getting this to work.
I have written the following code into a file located at src/components/navbar.js:
import React from 'react';
export default class navBar extends React.Component {
render() {
return (
<p>Hello world.</p>
)
}
}
Now I'd like to import this component from my src/App.js, which looks like this:
import React, { Component } from 'react';
import './App.css';
import navBar from './components/navbar.js'
class App extends Component {
render() {
return (
<navBar/>
);
}
}
export default App;
If I compile and open the site, nothing's there, which confuses me.
I'd be very thankful for any help!
EDIT:
It's been suggested that the problem is that <App /> is not being rendered anywhere. I don't believe that's the case, since there's another file being created by default (index.js), which looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
I have also tried putting the paragraph (and the entire navbar) directly into src/App.js.
After compiling I could see the expected results in the browser, so the problem should lie with the exporting/importing.

In JSX, lower case tags are considered to be simple HTML/SVG elements. You can use lower case only if you use accessors (so with a dot like bla.blabla).
You can read about it here for example.
So in your case you must change the class name navBar to NavBar and then in the render method:
render() {
return (
<NavBar/>
);
}

Here is a full working example:
** Note: NavBar.js shoud start with a Capital letter.
App.js
import React from "react";
import ReactDOM from "react-dom";
import NavBar from "./components/NavBar";
function App() {
return (
<div className="App">
<NavBar />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
NavBar.js
import React from "react";
export default class NavBar extends React.Component {
render() {
return (
<div>
<p>Hello world.</p>
</div>
);
}
}

cannot diplay the json data on browser

i have testdata.json file which contains json data, when i try to execute the code below i am getting an error as "A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object". what should i do now?
this is contestpreview.js file:
import React from 'react';
const ContestPreview = (contest) => {
<div className = "contestPreview">
<div>
{contest.categoryName}
</div>
<div>
{contest.contestName}
</div>
</div>
};
export default ContestPreview;
This my app.js file:
import React from 'react';
import Header from './Header';
import ContestPreview from './ContestPreview';
class App extends React.Component {
state= { test : 7};
render(){
return(<div>
<div>
<Header message = "Naming contests"/>
</div>
<div>
<ContestPreview {...this.props.contests}/>
</div>
</div>
);
}
};
export default App;
This is my index.js file:
import React from'react';
import ReactDom from 'react-dom';
import data from './testData';
console.log(data);
import App from './components/App';
ReactDom.render(
<App contest = {data.contest}/>,
document.getElementById('root')
);

Your ContentPreview component doesn't return a React Component. It's a small error on your part, but you can fix this by either adding a return statement, or by replacing your curly-braces with parenthesis.
Like so:
const ContestPreview = (contest) => (
<div className = "contestPreview">
<div>
{contest.categoryName}
</div>
<div>
{contest.contestName}
</div>
</div>
);
export default ContestPreview;
or
const ContestPreview = (contest) => {
return (
<div className = "contestPreview">
<div>
{contest.categoryName}
</div>
<div>
{contest.contestName}
</div>
</div>
);
};
export default ContestPreview;
The latter allows you to add some application logic before the return, if you want (though discouraged).
Since you're using a stateless functional component, you may find my previous answer on the pros/cons of these interesting.
Good luck!