We Keep Coding

Properties background image not working [React]

I'm trying to set the background image of a div depending on the value of a component property, the background doesn't show, however it does show when I harcode the background-image property in the css file.
Here is the component code :
import React, { Component } from "react";
import "./Banner.css";
export default class Banner extends Component {
render() {
const style = {
backgroundImage: `url("${this.props.image}")`,
};
return (
<div className="banner" style={style}>
Chez vous, partout et ailleurs
</div>
);
}
}
Here is the Banner.css file:
.banner {
/* background-image: url("../assets/images/moutains.png"); */
background-size: cover;
height: 170px;
border-radius: 20px;
text-align: center;
vertical-align: middle;
line-height: 170px;
font-size: 2.5rem;
color: #fff;
}
In the parent component:
<Banner image="../assets/images/moutains.png" text="" />
EDIT: Complete code and assets here: https://github.com/musk-coding/kasa
codesandbox: https://codesandbox.io/s/github/musk-coding/kasa
Thanks in advance for your help

Since, you are trying to access the image directly in your Component using the inline CSS. You must move your image to the public folder.
CODESANDBOX LINK: https://codesandbox.io/s/image-relative-path-issue-orbkw?file=/src/components/Home.js
Code Changes:
export default class Home extends Component {
render() {
const imageURL = "./assets/images/island-waves.png";
return (
<div className="container">
<div className="slogan" style={{ backgroundImage: `url(${imageURL})` }}>
Chez vous, partout et ailleurs
</div>
<Gallery />
</div>
);
}
}
NOTE: From React Docs, you can see the ways to add images in Component. create-reac-app-images-docs. But since you want an inline CSS, in that case we have to move our assets folder into the public folder to make sure that the image is properly referenced with our component.

set styling to div which contain TextInput field

I'm new to react and material ui. I'm using material ui version "1.0.0-beta.17" and react 15.6.2. Also has styled-components 2.0.0 and styled-components-breakpoint 1.0.1.
I have two TextInput fields in a div element.
const mycomponent = ({props}) => {
<div>
<SomeComponent />
<div>
<TextInput id="testId1" />
<TextInput id="testId2" />
</div>
</div>
}
Now when it render, it adds additional parent div to each input fields
Like this,
<div>
<div class="field--testId1">
<div class="FormItem__ElementWrapper-s14tem39-3 bgVlIQ">
<input id="testId1">
</div>
</div>
<div class="field--testId2">
<div class="FormItem__ElementWrapper-s14tem39-3 bgVlIQ">
<input id="testId2">
</div>
</div>
</div>
Now how can I target to the div to apply styles with class name field--testId1, field--testId2.
Here classname are generated by default material ui,
for example
.field--testId2{
width: "48%",
float: "left"
}
.field--testId2{
width: "48%",
float: "left"
}
I'm learning react and material ui so any help is much appreciated.

in order to override an existing class, you can add a styled-component wrapper instead of the wrapping div and override the child classes:
const TextInputWrapper = styled.div`
.field--testId2 {
// your custom styling
}
`
<TextInputWrapper>
<TextInput id="testId1" />
<TextInput id="testId2" />
</TextInputWrapper>

If you want to target div which has input, than you can follow these steps
Add a class to parent div, lets say wrapper
Target the closest div using > css selector
.wrapper > div {
border: 1px solid red;
width: 48%;
float: left;
margin-left: 1%;
}
input {
width: 100%;
box-sizing: border-box;
}
<div class="wrapper">
<div class="field--testId1">
<div class="FormItem__ElementWrapper-s14tem39-3 bgVlIQ">
<input id="testId1">
</div>
</div>
<div class="field--testId2">
<div class="FormItem__ElementWrapper-s14tem39-3 bgVlIQ">
<input id="testId2">
</div>
</div>
</div>

You give class directly to your textfield component and you can add your custom styles.
<TextInput className="your-class" id="testId1" />

You should use #material-ui/styles to extend your component's styles. Take a like at this answer, it's similar to your case: https://stackoverflow.com/a/67512965/8950820. Here is and example:
You should use #material-ui/styles to extend your Text Fields styles like this:
import React from 'react';
import { makeStyles, TextField } from '#material-ui/core';
const useStyles = makeStyles({
textField: {
border: 0,
borderRadius: 3,
padding: '0px 30px',
// Other styles here...
},
});
export default function MyComponent() {
const classes = useStyles();
return (
<div>
<TextField
size="large"
variant="outlined"
label="A text field title"
className={classes.textField}
/>
</div>
);
}
Learn more about the documentation at this link: #material-ui.com/styles

Styled-components doesn't output style tag

I've set up a new project in React using Webpack, and wanted to give a try to Styled Components.
My index.js looks like this:
import React from "react"
import ReactDOM from "react-dom"
import Page from "./site/Page"
import styled from 'styled-components'
// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
const Index = props => {
return (
<Page>
<Wrapper>
<Title>Test</Title>
</Wrapper>
</Page>);
};
ReactDOM.render(<Index/>, document.getElementById("app"))
The code outputted by styled-components on the HTML page looks fine but the <style> the on the head doesn't get added, resulting in no css style at all.
<section class="sc-bwzfXH gzMTbA">
<h1 class="sc-bdVaJa bzmvhR">Test</h1>
</section>
Does somebody have any suggestions?

Take a look at this API: CSSStyleSheet.insertRule().
Styled Components inserts empty style tags for hosting these dynamically injected styles.

CSS doesn't apply to a component

I have a react component that is wrapped up in div:
AccountLogin.jsx:
import './AccountLogin.css';
export default observer(() => (
<div className="content">
Something here
</div>
));
AccountLogin.css:
.content {
color: blue;
background-color: blue;
margin: 500px;
}
But the css doesn't apply to my rendered component AccountLogin.
Any ideas why that could happen?

Looking at rfx-stack source, I can see that files suffixed with .global.css are imported in global scope where as others are imported as css-modules.
So you can either rename your file to AccountLogin.global.css or use the imported class name:
import styles from './AccountLogin.css';
Within component:
<div className={styles.content}>...</div>

'React' is defined but never used

I am following the official reactjs instructions to create a sample app. My node version is 6.9.0.
I created sample react app which is supposed to display a empty tic tac toe table according to the official website using following instructions:
npm install -g create-react-app
create-react-app my-app
cd my-app
changed to my-app directory
removed the default files inside the source directory as directed. Now
my index.js looks like this
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
Then I ran yarn start
But all I see is blank screen no tic tac toe table. And couple warnings in the console saying
Compiled with warnings.
./src/index.js
Line 1: 'React' is defined but never used no-unused-vars
Line 2: 'ReactDOM' is defined but never used no-unused-vars
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

You missed last parts in steps 4 & 5:
Add a file named index.css in the src/ folder with this CSS code.
Add a file named index.js in the src/ folder with this JS code.
index.css
body {
font: 14px "Century Gothic", Futura, sans-serif;
margin: 20px;
}
ol, ul {
padding-left: 30px;
}
.board-row:after {
clear: both;
content: "";
display: table;
}
.status {
margin-bottom: 10px;
}
.square {
background: #fff;
border: 1px solid #999;
float: left;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
width: 34px;
}
.square:focus {
outline: none;
}
.kbd-navigation .square:focus {
background: #ddd;
}
.game {
display: flex;
flex-direction: row;
}
.game-info {
margin-left: 20px;
}
index.js
class Square extends React.Component {
render() {
return (
<button className="square">
{/* TODO */}
</button>
);
}
}
class Board extends React.Component {
renderSquare(i) {
return <Square />;
}
render() {
const status = 'Next player: X';
return (
<div>
<div className="status">{status}</div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}
class Game extends React.Component {
render() {
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>{/* status */}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}
}
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('root')
);

You should create some component/element/, maybe style it, then call ReactDOM to render your component to the underlying html and then you will have it.
React is used to handle JSX and creation of React component
ReactDOM in your simple case will be used to render created element to dom.
See here : https://reactjs.org/blog/2015/10/01/react-render-and-top-level-api.html
So ading something like
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
to your code, you will get something if in your index.html there is element with id="root" inside <body> tag

This simply means your project has eslint configured to catch unused variables.
If you use JSX or anything React within that file the warning will go away just like suggested by zmii in his answer.
But i am writing this answer because someone showed me their code and they were facing the same problem.
Their code :
import React from 'react';
const person = () => {
return "<h2>I am a person!</h2>"
};
export default person;
The problem in the above code was that while returning, he used double quotes. So instead of JSX, it was returning string and therefore they were getting error that React was never not used.
Conclusion: Syntax are important so keep in mind, specially if you are starting out.
Hope this helps someone.

ESlint needs to be configured to work with React JSX. This excellent article has all the details.