0

I am trying to make a website template with Reactjs. In the Jumbotron section i make subscription form and in the home section User Entry form. But the css of one component interacted with another's one. How can i handle it? [1]: https://i.stack.imgur.com/Wd4OQ.png

User EntryJs:-

import React, { Component } from 'react'

import './User Entry.css'

class Form extends Component { initialState = { name: "", age: "", job: "" } state = this.initialState

changeHandler = event => {
    const { name, value } = event.target
    this.setState({
        [name]: value
    })
}

render() {
    const { name, job, age } = this.state
    return (

        <form className="form-inline">
            <div className="row">
                <div className="col-md-3">
                    <div className="form-group">
                        <label htmlFor="name">Name:-</label>
                        <input type="text"
                            className="form-control"
                            name="name"
                            id="name"
                            value={name}
                            autoFocus
                            onChange={this.changeHandler} />
                    </div>
                </div>
                <div className="col-md-3">
                    <div className="form-group">
                        <label htmlFor="age">Age:-</label>
                        <input type="text"
                            className="form-control"
                            name="age"
                            id="age"
                            value={age}
                            autoFocus
                            onChange={this.changeHandler} />
                    </div>
                </div>
                <div className="col-md-3">
                    <div className="form-group">
                        <label htmlFor="job">Job:-</label>
                        <input type="text"
                            className="form-control"
                            name="job"
                            id="job"
                            value={job}
                            autoFocus
                            onChange={this.changeHandler} />
                    </div>
                </div>
                <div className="col-md-3"></div>
            </div>
        </form>

    )
}

}

export default Form

Header JS:-

import React, { Component } from 'react'

import './Header.css' import { Link, withRouter } from "react-router-dom";

class Header extends Component { constructor(props) { super(props)

    this.state = {
        email: ""
    }
}

submitHandler = event => {
    event.preventDefault();
    alert(`Subscribed Email is : ${this.state.email}`);
}

changeHandler = event => {
    this.setState({
        email: event.target.value
    })

}


render() {
    return (
        // Navbar Starts 

        <div>
            <div className="row navbar">
                <Link to="/" style={{textDecoration:'none'}}><div className="col-md-2 logo">ReactApp</div></Link>
                <div className="col-md-6"></div>
                <Link to="/" style={{textDecoration:'none'}}> <div className="col-md-1 link"> Home</div> </Link>
                <Link to="/about" style={{textDecoration:'none'}}> <div className="col-md-1 link"> About</div> </Link>
                <Link to="/counter" style={{textDecoration:'none'}}> <div className="col-md-1 link"> Counter </div></Link>
                <Link style={{textDecoration:'none'}}><div className="col-md-1 link">Login</div></Link>
            </div>

            <div className="jumbotron text-center">
                <h1>React-App</h1>
                <p>We specialize in <strong>Web Development</strong></p>

                {/* Subscribing form starts*/}
                <form className="form-inline subscribingForm" onSubmit={this.submitHandler}>
                    <div className="input-group">
                        <input type="email"
                            className="form-control"
                            value={this.state.email}
                            onChange={this.changeHandler}
                            size="80"
                            placeholder="Email..."
                            required />
                        <div className="input-group-btn">
                            <input type="submit" value="Subscribe" className="subscribingBtn" />
                        </div>
                    </div>
                </form>
                {/* Subscribing form closes*/}
            </div>
        </div>

    )
}

}

export default withRouter(Header);

2 Answers 2

0

Where is the .css file loaded, in the root component? It probably is loaded globally and is used on every component.Better use JSS (https://cssinjs.org/?v=v10.3.0)

0

In general react transpiles all the css and add it in to tag. And as result you one file css conflicts with other. If you want to avoid this, you can use modular css. https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.