How should I reference an element created in React-Typescript and change its CSS properties?

Question

I have a form which needs its css Display to be set to block when I click on a certain button. When I click on the Add button id="add" it should set the css style block for id="modalContent" div. I've just started react and am completely new to it. I read something about ref but couldn't completely understand how to go through with it.

AddFormMod.tsx

import React from 'react';
    import './App.css';
    
    
    function AddForm(){
        return (
            <div id="modalContent" className="modal-content">
                <h1 id="headerAdd">ADD NEW CONTACT</h1>
                <form action="#" id="myForm">
                    <label className="required label"  ><b>Name: </b></label><br />
                    <input className="form-fields type1" type="text" id="name" name="name" required></input><br/><br/>
                    <label className="required label"  ><b>Email:</b> </label><br/>
                    <input className="form-fields type1 " type="email" id="email" name="mail" required></input><br/><br/>
                    <label className="required label"  ><b>Mobile:</b> </label>
                    <label className="label" id="landlinelabel"  ><b>Landline:</b></label><br/>
                    <input className="form-fields" type="tel" id="mobile" name="mobile" pattern="^\d{10}$" required></input>
                    <input className="form-fields" type="tel" id="landline" name="landline" ></input><br/><br/>
                    <label className="label"  ><b>Website</b></label><br/>
                    <input className="form-fields type1" type="text" id="website" name="website" ></input><br/><br/>
                    <label className="label"><b>Address:</b> </label><br/>
                    <textarea className="addressstyle form-fields" id="address1" name="address1" rows={9} cols={74}></textarea>
                    <input className = "buttonstyle" type="submit" value="Add" id="adddetails" ></input>
                    <input className = "buttonstyle" type="button" value="Cancel" id="candetails"></input>
                </form> 
            </div>
            
        );
    }
    
    export default AddForm;

App.tsx

import React from 'react';
import './App.css';
import AddForm from './AddFormMod';



function App() {
  return (
    <p id="title"> Address Book </p>
  );
}

function AddHome(){
  return (
      <div>
          <button id="home" >HOME</button>
          <button id="add" onClick={} >+ADD</button>
      </div>
  );
}

function ContactBar(){

  return (
    <div>
      <p id="contacts">CONTACTS</p>
    </div>
  );
}

export { App , AddHome, ContactBar };

Check with your browser. See the rendered code. If you can create a demo out of your code, I can help. — m4n0
– m4n0, Commented Feb 24, 2021 at 15:27
You do not need or want refs. @JAM's answer is correct. You can also pass props to the AddForm component when you call it. <AddForm someProp="something"/>. Right now it takes no props, but it could use props to control the class names or the styles. — Linda Paiste
– Linda Paiste, Commented Feb 27, 2021 at 3:45

JAM · Accepted Answer · 2021-02-24 15:54:24Z

One approach to achieve the result you want, is to utilize conditional rendering. For example, when you click the "add"-button in your AddHome component, you can set a state variable to render the AddForm-component:

function AddHome(){
  const [shouldRenderForm, setShouldRenderForm] = useState(false);
  return (
      <div>
          <button id="home" >HOME</button>
          <button id="add" onClick={() => setShouldRenderForm(true)} >+ADD</button>
          {shouldRenderForm && <AddForm />}
      </div>
  );
}

I'm also guessing you want to "close the form" after submit or via a close button inside the AddForm-component. To achieve this, simply pass a prop to the component, for the AddForm-component to call to close the form:

// ... in the add AddHome component:
{shouldRenderForm && <AddForm closeForm={() => setShouldRenderForm(false)} />}

// ... in AddForm component:
type AddFormProps = { closeForm: () => void };
function AddForm({ closeForm }: AddFormProps) {
  // ... i.e. on a button to close the form
  <button type="button" onClick={() => closeForm()}>Cancel</button>
}

Checkout a working example in this sandbox.

Collectives™ on Stack Overflow

How should I reference an element created in React-Typescript and change its CSS properties?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related