Patterns that indicate DOM dynamic behavior and

When converting JavaScript code to React code and deciding when to use useState, you need to look for patterns that indicate dynamic behavior. Dynamic behavior in a web application typically involves changes in the DOM based on user interactions or other events. Here are some common changes that suggest the need for state management:

1. Changes in Element Visibility

Example: Showing or hiding elements based on user actions.

Pattern: Manipulating display style, toggling CSS classes that control visibility (like adding/removing a hidden class).

JavaScript Example

 var element = document.getElementById(‘element‘);
 element.style.display = ‘none‘; // Hides the element

React Conversion

const [isVisible, setIsVisible] = useState(true);

// Toggling visibility
<div style={{ display: isVisible ? ‘block‘ : ‘none‘ }}>Content</div>

2. Changes in Text Content

Example: Updating button text or other text content based on actions.

Pattern: Directly setting textContent or innerHTML.

JavaScript Example

 button.textContent = ‘New Text‘;

React Conversion

const [buttonText, setButtonText] = useState(‘Initial Text‘);

<button onClick={() => setButtonText(‘New Text‘)}>{buttonText}</button>

3. Toggling CSS Classes

Example: Adding or removing CSS classes based on conditions.

Pattern: Using classList.add, classList.remove, or classList.toggle.

JavaScript Example

 element.classList.add(‘active‘);

React Conversion

const [isActive, setIsActive] = useState(false);

<div className={isActive ? ‘active‘ : ”}>Content</div>

4. Form Input Values

Example: Handling input changes.

Pattern: Reading or setting value on input elements.

JavaScript Example

 input.value = ‘new value‘;

React Conversion

const [inputValue, setInputValue] = useState(”);

<input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />

5. Attributes

Example: Modifying attributes like disabled, checked, or src.

Pattern: Directly setting attributes on elements.

JavaScript Example

 element.disabled = true;

React Conversion

const [isDisabled, setIsDisabled] = useState(false);

<button disabled={isDisabled}>Click me</button>

6. Conditional Rendering

Example: Rendering different components or elements based on conditions.

Pattern: Using if statements or ternary operators to append/remove elements.

JavaScript Example

 if (condition) {
 document.body.appendChild(element);
 } else {
 document.body.removeChild(element);
 }

React Conversion

const [condition, setCondition] = useState(false);

{condition ? <Component /> : null}

7. Dynamic Styles

Example: Changing inline styles dynamically.

Pattern: Setting the style attribute with dynamic values.

JavaScript Example

 element.style.color = ‘red‘;

React Conversion

const [color, setColor] = useState(‘black‘);

8. Lists and Arrays

Example: Rendering lists based on array data.

Pattern: Adding/removing items in arrays and updating the DOM accordingly.

JavaScript Example

 const items = [‘Item 1‘, ‘Item 2‘];
 const ul = document.createElement(‘ul‘);
 items.forEach(item => {
 const li = document.createElement(‘li‘);
 li.textContent = item;
 ul.appendChild(li);
 });
 document.body.appendChild(ul);

React Conversion

const [items, setItems] = useState([‘Item 1‘, ‘Item 2‘]);

<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>

9. Dynamic List Manipulation

Example: Adding, removing, or updating items in a list based on user actions.

Pattern: Manipulating array content and rendering it to the DOM.

JavaScript Example

let list = document.getElementById(‘list‘);
let items = [‘Item 1‘, ‘Item 2‘];
items.forEach(item => {
let li = document.createElement(‘li‘);
li.textContent = item;
list.appendChild(li);
});

// Adding an item
let newItem = ‘Item 3‘;
items.push(newItem);
let newLi = document.createElement(‘li‘);
newLi.textContent = newItem;
list.appendChild(newLi);

React Conversion

const [items, setItems] = useState([‘Item 1‘, ‘Item 2‘]);

// Adding an item
const addItem = () => {
setItems([…items, ‘Item 3‘]);
};

return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);

10. Form Input Handling

Example: Handling form input changes and validations.

Pattern: Listening for input events and updating values.

JavaScript Example

 let input = document.getElementById(‘input‘);
 input.addEventListener(‘input‘, function(event) {
 console.log(event.target.value);
 });

React Conversion

const [inputValue, setInputValue] = useState(”);

return (
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
);

11. Animation Triggers

Example: Triggering CSS animations based on user interactions.

Pattern: Adding/removing CSS classes to start animations.

JavaScript Example

 let box = document.getElementById(‘box‘);
 box.addEventListener(‘click‘, function() {
 box.classList.add(‘animate‘);
 });

React Conversion

const [animate, setAnimate] = useState(false);

return (
<div
id=“box“
className={animate ? ‘animate‘ : ”}
onClick={() => setAnimate(true)}
/>
);

12. Data Fetching

Example: Fetching data from an API and updating the DOM.

Pattern: Making asynchronous requests and rendering results.

JavaScript Example

 fetch(‘https://api.example.com/data‘)
 .then(response => response.json())
 .then(data => {
 document.getElementById(‘data‘).textContent = JSON.stringify(data);
 });

React Conversion

const [data, setData] = useState(null);

useEffect(() => {
fetch(‘https://api.example.com/data‘)
.then(response => response.json())
.then(data => setData(data));
}, []);

return <div id=“data“>{data ? JSON.stringify(data) : ‘Loading…‘}</div>;

13. Timer or Interval Updates

Example: Updating the DOM based on time intervals.

Pattern: Using setInterval or setTimeout to trigger updates.

JavaScript Example

 let counter = 0;
 setInterval(() => {
 document.getElementById(‘counter‘).textContent = counter++;
 }, 1000);

React Conversion

const [counter, setCounter] = useState(0);

useEffect(() => {
const interval = setInterval(() => {
setCounter(prevCounter => prevCounter + 1);
}, 1000);

return () => clearInterval(interval);
}, []);

return <div id=“counter“>{counter}</div>;

14. Conditional Component Rendering

Example: Showing different components based on a condition.

Pattern: Using if statements or ternary operators to toggle elements.

JavaScript Example

 if (isLoggedIn) {
 document.getElementById(‘welcome‘).textContent = ‘Welcome, User!‘;
 } else {
 document.getElementById(‘welcome‘).textContent = ‘Please log in.‘;
 }

React Conversion

const [isLoggedIn, setIsLoggedIn] = useState(false);

return (
<div id=“welcome“>
{isLoggedIn ? ‘Welcome, User!‘ : ‘Please log in.‘}
</div>
);

15. Modal Windows

Example: Displaying a modal window based on user actions.

Pattern: Toggling visibility of modal elements.

JavaScript Example

let modal = document.getElementById(‘modal‘);
let openButton = document.getElementById(‘openModal‘);
let closeButton = document.getElementById(‘closeModal‘);

openButton.addEventListener(‘click‘, function() {
modal.style.display = ‘block‘;
});

closeButton.addEventListener(‘click‘, function() {
modal.style.display = ‘none‘;
});

React Conversion

const [isModalOpen, setIsModalOpen] = useState(false);

return (
<>
<button id=“openModal“ onClick={() => setIsModalOpen(true)}>Open Modal</button>
{isModalOpen && (
<div id=“modal“>
<button id=“closeModal“ onClick={() => setIsModalOpen(false)}>Close</button>
<div>Modal Content</div>
</div>
)}
</>
);

16. Accordion Panels

Example: Expanding or collapsing accordion panels.

Pattern: Toggling classes or styles for panel visibility.

JavaScript Example

 let accordion = document.getElementById(‘accordion‘);
 accordion.addEventListener(‘click‘, function() {
 let panel = this.nextElementSibling;
 panel.style.display = panel.style.display === ‘block‘ ? ‘none‘ : ‘block‘;
 });

React Conversion

const [isPanelOpen, setIsPanelOpen] = useState(false);

return (
<div id=“accordion“ onClick={() => setIsPanelOpen(!isPanelOpen)}>
Accordion Header
<div style={{ display: isPanelOpen ? ‘block‘ : ‘none‘ }}>
Accordion Content
</div>
</div>
);

17. Tabs Navigation

Example: Switching content based on selected tab.

Pattern: Changing the visible content based on active tab index.

JavaScript Example

let tabs = document.querySelectorAll(‘.tab‘);
let contents = document.querySelectorAll(‘.content‘);

tabs.forEach((tab, index) => {
tab.addEventListener(‘click‘, function() {
contents.forEach(content => content.style.display = ‘none‘);
contents[index].style.display = ‘block‘;
});
});

React Conversion

const [activeTab, setActiveTab] = useState(0);

return (
<>
<div className=“tabs“>
{[‘Tab 1‘, ‘Tab 2‘, ‘Tab 3‘].map((tab, index) => (
<button key={index} onClick={() => setActiveTab(index)}>{tab}</button>
))}
</div>
<div className=“contents“>
{activeTab === 0 && <div>Content 1</div>}
{activeTab === 1 && <div>Content 2</div>}
{activeTab === 2 && <div>Content 3</div>}
</div>
</>
);

18. Dynamic Styling Based on State

Example: Changing styles based on state values.

Pattern: Directly modifying the style attribute or using class toggles.

JavaScript Example

 let box = document.getElementById(‘box‘);
 box.style.backgroundColor = ‘red‘;

React Conversion

const [color, setColor] = useState(‘red‘);

return (
<div id=“box“ style={{ backgroundColor: color }}>Box Content</div>
);