ការស្រង់​យក​ទិន្នន័យ​នៅ​ក្នុង​កញ្ចប់ React ត្រូវ​ធ្វើ​ឡើង​ដោយ​ប្រើប្រាស់​ក្បួនខ្នាត​ useState hook ដូច​​ខាង​ក្រោម​នេះ៖

import './App.css'
import './styles/global.css'
import Header from './components/header'

function App() {
  return (
    <div className = "App">
      <Header />
    </div>
  )
}

export default App

import '../styles/header.css'
import {useState, useEffect} from 'react'

function Header(){

    const [title, setTitle] = useState('កម្មវិធី React')
    const [data, setData] = useState(false)
    const [q, setQ] = useState(0)
    const [category, setCategory] = useState(0)

    function handleSubmit(e){
        e.preventDefault()
        setData([q, category])
    }

    useEffect(()=>{
        if(data){
            alert(data[0])
            alert(data[1])
        }
    })

    return (
        <div className="Header ">
            <div class='wrapper region'>
                <div class='logo' onMouseOver={()=>setTitle('កម្មវិធី​កំពុង​ដំណើរការ')} onMouseOut={()=>setTitle('កម្មវិធី React')}>
                    <a>{title}</a>
                </div>

                <form class='search' onSubmit={handleSubmit}>
                    <select name='category' onChange={(e)=>setCategory(e.target.value)}>
                        <option>ការផ្សាយ</option>
                        <option>ជំពូក</option>
                    </select>
                    <input type="text" name='q' onChange={(e)=>setQ(e.target.value)} required />
                    <input type='submit' value='បញ្ជូន' />
                </form>

                <div class='logout'>ទំព័រ​ដើម | ចូល​ក្នុង</div>
            </div>
        </div>
    )
}

export default Header

.Header{
    background: var(--background-dark);
    color: white; 
    padding: 5px 0;
}

.Header .wrapper{
    display: grid;
    grid-template-columns: 30% auto 25%;
    align-items: center;
}

.Header .wrapper .logo{
    font: 30px/1.5 Anton, Limonf3;
}

.Header .wrapper .search{
    display: grid;
    grid-template-columns: 20% auto 20%;
}

.Header .wrapper .search input, 
.Header .wrapper .search select{
    font: 14px/1.5 Vidaloka, OdorMeanChey;
    padding: 0 10px;
}

.Header .wrapper .logout{
    text-align: right;
    font-size: 18px;
}

GitHub: https://github.com/Sokhavuth/react

Heroku: https://khmerweb-react.herokuapp.com/