0% found this document useful (0 votes)
0 views

react hook

The document contains multiple React component examples that utilize the useRef hook for manipulating DOM elements. In the first example, a headline's text is changed on button click, while the second example modifies an image's source and dimensions. Each component demonstrates basic React functionality with event handling and refs.

Uploaded by

tanverahammad661
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
0 views

react hook

The document contains multiple React component examples that utilize the useRef hook for manipulating DOM elements. In the first example, a headline's text is changed on button click, while the second example modifies an image's source and dimensions. Each component demonstrates basic React functionality with event handling and refs.

Uploaded by

tanverahammad661
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

import React, { useRef } from 'react'

const app = () => {


let myHeadLine=useRef();
const change = () => {
myHeadLine.current.InnerText="hello useRef";

}
return (
<div>

<h1 ref={myHeadLine}></h1>

<button onClick={change}>click</button>
</div>
)
}

export default app

"<ul><li>A</li><li>B</li></ul>";

import React, { useRef } from 'react'

const app = () => {


let myHeadLine=useRef();
const change = () => {
myHeadLine.current.InnerText="hello useRef";

}
return (
<div>

<img src="https://placehold.co/600x400"/>
<button onClick={change}>click</button>
</div>
)
}

export default app


import React, { useRef } from 'react'

const app = () => {

let myimg=useRef();

const change = () => {


myimg.current.src="https://placehold.co/600x400/000000/FFF";
myimg.current.setAttribute('hight','200px')
myimg.current.setAttribute('width','300px')

}
return (
<div>

<img src="https://placehold.co/600x400"/>
<button onClick={change}>click</button>
</div>
)
}

export default app

You might also like